diff options
Diffstat (limited to 'files/de/web/api/webglrenderingcontext/index.html')
| -rw-r--r-- | files/de/web/api/webglrenderingcontext/index.html | 441 |
1 files changed, 441 insertions, 0 deletions
diff --git a/files/de/web/api/webglrenderingcontext/index.html b/files/de/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..77182a3177 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/index.html @@ -0,0 +1,441 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - NeedsTranslation + - TopicStub + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +<div>{{APIRef("WebGL")}}</div> + +<p>The <strong>WebGLRenderingContext</strong> interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.</p> + +<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code><canvas></code> element, supplying "webgl" as the argument:</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); +var gl = canvas.getContext('webgl'); +</pre> + +<p>Once you have the WebGL rendering context for a canvas, you can render within it.</p> + +<p>The <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> has more information, examples, and resources on how to get started with WebGL.</p> + +<h2 id="Constants">Constants</h2> + +<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p> + +<h2 id="The_WebGL_context">The WebGL context</h2> + +<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> + <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> + <dd> + <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p> + </dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> + <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> + <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd> + <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> + <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd> + <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> + <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd> +</dl> + +<h2 id="Viewing_and_clipping">Viewing and clipping</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> + <dd>Defines the scissor box.</dd> + <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> + <dd>Sets the viewport.</dd> +</dl> + +<h2 id="State_information">State information</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> + <dd>Selects the active texture unit.</dd> + <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> + <dd>Sets the source and destination blending factors.</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> + <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt> + <dd>Sets the RGB blend equation and alpha blend equation separately.</dd> + <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> + <dd>Defines which function is used for blending pixel arithmetic.</dd> + <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> + <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd> + <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> + <dd>Specifies the color values used when clearing color buffers.</dd> + <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> + <dd>Specifies the depth value used when clearing the depth buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> + <dd>Specifies the stencil value used when clearing the stencil buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> + <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd> + <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> + <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd> + <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> + <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd> + <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> + <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd> + <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> + <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd> + <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> + <dd>Disables specific WebGL capabilities for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> + <dd>Enables specific WebGL capabilities for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> + <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd> + <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> + <dd>Returns a value for the passed parameter name.</dd> + <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> + <dd>Returns error information.</dd> + <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> + <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd> + <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> + <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> + <dd>Sets the line width of rasterized lines.</dd> + <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> + <dd>Specifies the pixel storage modes</dd> + <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> + <dd>Specifies the scale factors and units to calculate depth values.</dd> + <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> + <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> + <dd>Sets the both front and back function and reference value for stencil testing.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> + <dd>Sets the front and/or back function and reference value for stencil testing.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> + <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> + <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> + <dd>Sets both the front and back-facing stencil test actions.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> + <dd>Sets the front and/or back-facing stencil test actions.</dd> +</dl> + +<h2 id="Buffers">Buffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> + <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> + <dd>Updates buffer data.</dd> + <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> + <dd>Updates buffer data starting at a passed offset.</dd> + <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> + <dd>Creates a <code>WebGLBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> + <dd>Deletes a <code>WebGLBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> + <dd>Returns information about the buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed buffer is valid.</dd> +</dl> + +<h2 id="Framebuffers">Framebuffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> + <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> + <dd>Returns the status of the framebuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> + <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> + <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> + <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> + <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> + <dd>Returns information about the framebuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> + <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd> +</dl> + +<h2 id="Renderbuffers">Renderbuffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> + <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> + <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> + <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> + <dd>Returns information about the renderbuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> + <dd>Creates a renderbuffer data store.</dd> +</dl> + +<h2 id="Textures">Textures</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> + <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> + <dd>Specifies a 2D texture image in a compressed format.</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> + <dd>Specifies a 2D texture sub-image in a compressed format.</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> + <dd>Copies a 2D texture image.</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> + <dd>Copies a 2D texture sub-image.</dd> + <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> + <dd>Creates a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> + <dd>Deletes a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> + <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> + <dd>Returns information about the texture.</dd> + <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> + <dd>Specifies a 2D texture image.</dd> + <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> + <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt> + <dd>Sets texture parameters.</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt> + <dd>Sets texture parameters.</dd> +</dl> + +<h2 id="Programs_and_shaders">Programs and shaders</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> + <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> + <dd>Binds a generic vertex index to a named attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> + <dd>Compiles a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> + <dd>Creates a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> + <dd>Creates a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> + <dd>Deletes a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> + <dd>Deletes a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> + <dd>Detaches a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> + <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> + <dd>Returns information about the program.</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> + <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> + <dd>Returns information about the shader.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> + <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> + <dd>Returns the information log for a <code>WebGLShader</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> + <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd> + <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> + <dd>Links the passed <code>WebGLProgram</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> + <dd>Sets the source code in a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> + <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd> + <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> + <dd>Validates a <code>WebGLProgram</code>.</dd> +</dl> + +<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> + <dd>Disables a vertex attribute array at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> + <dd>Enables a vertex attribute array at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> + <dd>Returns information about an active attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> + <dd>Returns information about an active uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> + <dd>Returns the location of an attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> + <dd>Returns the value of a uniform variable at a given location.</dd> + <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> + <dd>Returns the location of a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> + <dd>Returns information about a vertex attribute at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> + <dd>Returns the address of a given vertex attribute.</dd> + <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> + <dd>Specifies a value for a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> + <dd>Specifies a matrix value for a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> + <dd>Specifies a value for a generic vertex attribute.</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> + <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd> +</dl> + +<h2 id="Drawing_buffers">Drawing buffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> + <dd>Clears specified buffers to preset values.</dd> + <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> + <dd>Renders primitives from array data.</dd> + <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> + <dd>Renders primitives from element array data.</dd> + <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> + <dd>Blocks execution until all previously called commands are finished.</dd> + <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> + <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd> +</dl> + +<h2 id="Working_with_extensions">Working with extensions</h2> + +<p>These methods manage WebGL extensions:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> + <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd> + <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> + <dd>Returns an extension object.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3> + +<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p> + +<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p> + +<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p> + +<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3> + +<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p> + +<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p> + +<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("9")}}</td> + <td>20</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>8.0</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> |