The WebGLRenderingContext.scissor()
method of the WebGL API sets a scissor box, which limits the drawing to a specified rectangle.
The WebGLRenderingContext.scissor()
method of the WebGL API sets a scissor box, which limits the drawing to a specified rectangle.
js
scissor(x, y, width, height)
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.
None (undefined
).
If either width or height is a negative value, a gl.INVALID_VALUE
error is thrown.
When the scissor test is enabled, only pixels within the scissor box can be modified by drawing commands.
js
// 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
.
js
gl.scissor(0, 0, 200, 200); gl.getParameter(gl.SCISSOR_BOX); // Int32Array[0, 0, 200, 200]
Specification |
---|
WebGL Specification # 5.14.4 |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
scissor |
9 | 12 | 4 | 11 | 12 | 5.1 | 4.4.3 | 25 | 4 | 12 | 8 | 1.5 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/scissor