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
void gl.viewport(x, y, width, height);
Parameters
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.
Return value
None.
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
.
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
.
gl.getParameter(gl.MAX_VIEWPORT_DIMS); // e.g. Int32Array[16384, 16384]
To get the current viewport, query the VIEWPORT
constant.
gl.getParameter(gl.VIEWPORT); // e.g. Int32Array[0, 0, 640, 480]
Specifications
Specification | Status | Comment |
---|---|---|
WebGL 1.0 The definition of 'viewport' in that specification. |
Recommendation | Initial definition. |
OpenGL ES 2.0 The definition of 'glViewport' in that specification. |
Standard | Man page of the OpenGL API. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
viewport | Chrome Full support 9 | Edge Full support 12 | Firefox Full support 4 | IE Full support 11 | Opera Full support 12 | Safari Full support 5.1 | WebView Android Full support Yes | Chrome Android Full support 25 | Firefox Android Full support Yes | Opera Android Full support 12 | Safari iOS Full support 8 | Samsung Internet Android Full support 1.5 |
Legend
- Full support
- Full support