WebGLRenderingContext: viewport() method
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.
Syntax
js
viewport(x, y, width, height)
Parameters
x-
A
GLintspecifying the horizontal coordinate for the lower left corner of the viewport origin. Default value: 0. y-
A
GLintspecifying the vertical coordinate for the lower left corner of the viewport origin. Default value: 0. width-
A non-negative
GLsizeispecifying the width of the viewport. Default value: width of the canvas. height-
A non-negative
GLsizeispecifying the height of the viewport. Default value: height of the canvas.
Return value
None (undefined).
Errors thrown
If either width or height is a negative value, a
gl.INVALID_VALUE error is thrown.
Examples
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]
Specifications
| Specification |
|---|
| WebGL Specification # 5.14.4 |
Browser compatibility
BCD tables only load in the browser