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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | 4.0 (2.0) | 11 | 12 | 5.1 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | 25 | (Yes) | ? | 12 | 8.1 |