The WebGLRenderingContext.viewport()
method of the WebGL API sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.
The WebGLRenderingContext.viewport()
method of the WebGL API sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.
js
viewport(x, y, width, height)
x
A GLint
specifying the horizontal coordinate for the lower left corner of the viewport origin. Default value: 0.
y
A GLint
specifying the vertical coordinate for the lower left corner of the viewport origin. Default value: 0.
width
A non-negative GLsizei
specifying the width of the viewport. Default value: width of the canvas.
height
A non-negative GLsizei
specifying the height of the viewport. Default value: height of the canvas.
None (undefined
).
If either width or height is a negative value, a gl.INVALID_VALUE
error is thrown.
When you first create a WebGL context, the size of the viewport will match the size of the canvas. However, if you resize the canvas, you will need to tell the WebGL context a new viewport setting. In this situation, you can use gl.viewport
.
js
gl.viewport(0, 0, canvas.width, canvas.height);
The viewport width and height are clamped to a range that is implementation dependent. To get this range, you can use the MAX_VIEWPORT_DIMS
constant, which returns an Int32Array
.
js
gl.getParameter(gl.MAX_VIEWPORT_DIMS); // e.g. Int32Array[16384, 16384]
To get the current viewport, query the VIEWPORT
constant.
js
gl.getParameter(gl.VIEWPORT); // e.g. Int32Array[0, 0, 640, 480]
Specification |
---|
WebGL Specification # 5.14.4 |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
viewport |
9 | 12 | 4 | 11 | 12 | 5.1 | 4.4.3 | 25 | 4 | 12 | 8 | 1.5 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/viewport