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.0The definition of 'viewport' in that specification. | Recommendation | Initial definition. |
OpenGL ES 2.0The 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.
Update compatibility data on GitHub
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
See also
WebGLRenderingContext.viewport() by Mozilla Contributors is licensed under CC-BY-SA 2.5.