WebGLRenderingContext.viewport()

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

Browser compatibility

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
≤37
25
Yes
12
8
1.5

See also

© 2005–2021 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