The WebGLRenderingContext.scissor()
method of the WebGL API sets a scissor box, which limits the drawing to a specified rectangle.
Syntax
void gl.scissor(x, y, width, height);
Parameters
x
- A
GLint
specifying the horizontal coordinate for the lower left corner of the box. Default value: 0. y
- A
GLint
specifying the vertical coordinate for the lower left corner of the box. Default value: 0. - width
- A non-negative
Glsizei
specifying the width of the scissor box. Default value: width of the canvas. - height
- A non-negative
Glsizei
specifying the height of the scissor box. 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 the scissor test is enabled, only pixels within the scissor box can be modified by drawing commands.
// turn on scissor test gl.enable(gl.SCISSOR_TEST); // set the scissor rectangle gl.scissor(x, y, width, height); // execute drawing commands in the scissor box (e.g. clear) // turn off scissor test again gl.disable(gl.SCISSOR_TEST);
To get the current scissor box dimensions, query the SCISSOR_BOX
constant which returns an Int32Array
.
gl.scissor(0, 0, 200, 200); gl.getParameter(gl.SCISSOR_BOX); // Int32Array[0, 0, 200, 200]
Specifications
Specification | Status | Comment |
---|---|---|
WebGL 1.0 The definition of 'scissor' in that specification. |
Recommendation | Initial definition. |
OpenGL ES 2.0 The definition of 'glScissor' 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 |