color-rendering - SVG: Scalable Vector Graphics
the color-rendering attribute provides a hint to the svg user agent about how to optimize its color interpolation and compositing operations.
... color-rendering takes precedence over color-interpolation-filters.
... for example, assume color-rendering: optimizespeed and color-interpolation-filters: linearrgb.
...And 4 more matches

Rendering a list of Vue components - Learn web development
rendering lists with v-for to be an effective to-do list, we need to be able to render multiple to-do items.
...this is a built-in vue directive that lets us include a loop inside of our template, repeating the rendering of a template feature for each item in an array.
...this way you have some data available for rendering using v-for.
...And 3 more matches

WebGLRenderingContext.makeXRCompatible() - Web APIs
the webglrenderingcontext method makexrcompatible() ensures that the rendering context described by the webglrenderingcontext is ready to render the scene for the immersive webxr device on which it will be displayed.
... syntax let makecompatpromise = webglrenderingcontext.makexrcompatible(); parameters none.
... return value a promise which successfully resolves once the webgl context is ready to be used for rendering webxr content.
...And 3 more matches

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
along the way, we'll learn about using conditional rendering in our templates.
... objective: to continue our learning about components classes, start looking at conditional rendering, and wire up some of our footer functionality.
... to fix this, we need to update this part of the template to include some conditional rendering.
...And 2 more matches

RenderingContext - Web APIs
renderingcontext is a webidl typedef which can refer to any one of the interfaces that represent a graphics rendering context within a <canvas> element: canvasrenderingcontext2d, webglrenderingcontext, or webgl2renderingcontext.
... by using the shorthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web developers directly use.
... there is no renderingcontext interface, and there are no objects which implement type renderingcontext.
...And 2 more matches

image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm.
...for example, if the natural size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering.
... syntax /* keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset; values auto the scaling algorithm is ua dependent.
...And 2 more matches

Crisp pixel art look with image-rendering - Game development
the css property to achieve this scaling is image-rendering.
... set the <canvas> element's image-rendering css property to some value that does not make the image blurry.
...check out the image-rendering article for more information on the differences between these values, and which prefixes to use depending on the browser.
...the original image we want to upscale looks like this: here's some html to create a simple canvas: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and render a crisp image: canvas { width: 512px; height: 512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code use...

Vue conditional rendering: editing existing todos - Learn web development
to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels.
... objective: to learn how to do conditional rendering in vue.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

rendering-intent - SVG: Scalable Vector Graphics
the rendering-intent attribute permits the specification of a color profile rendering intent other than the default.
... rendering-intent is applicable primarily to color profiles corresponding to cmyk color spaces.
... the different options cause different methods to be used for translating colors to the color gamut of the target rendering device.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'rendering-intent' in that specification.

CanvasRenderingContext2D.beginPath() - Web APIs
the canvasrenderingcontext2d.beginpath() method of the canvas 2d api starts a new path by emptying the list of sub-paths.
... note: to create a new sub-path, i.e., one matching the current canvas state, you can use canvasrenderingcontext2d.moveto().
...nvas'); const ctx = canvas.getcontext('2d'); // first path ctx.beginpath(); ctx.strokestyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(200, 20); ctx.stroke(); // second path ctx.beginpath(); ctx.strokestyle = 'green'; ctx.moveto(20, 20); ctx.lineto(120, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beginpath' in that specification.

CanvasRenderingContext2D.createPattern() - Web APIs
the canvasrenderingcontext2d.createpattern() method of the canvas 2d api creates a pattern using the specified image and repetition.
...the pattern it creates must be assigned to the canvasrenderingcontext2d.fillstyle or canvasrenderingcontext2d.strokestyle properties, after which it is applied to any subsequent drawing.
...t.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, canvas.width, canvas.height); // add our primary canvas to the webpage document.body.appendchild(canvas); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createpattern' in that specification.

CanvasRenderingContext2D.fillText() - Web APIs
the canvasrenderingcontext2d method filltext(), part of the canvas 2d api, draws a text string at the specified coordinates, filling the string's characters with the current fillstyle.
... syntax canvasrenderingcontext2d.filltext(text, x, y [, maxwidth]); parameters text a domstring specifying the text string to render into the context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.

CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcontext2d.gettransform() method of the canvas 2d api retrieves the current transformation matrix being applied to the context.
...we apply a transform to the first one's context using canvasrenderingcontext2d.settransform() and draw a square on it, then retrieve the matrix from it using gettransform().
...es[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.gettransform' in that specification.

CanvasRenderingContext2D.putImageData() - Web APIs
the canvasrenderingcontext2d.putimagedata() method of the canvas 2d api paints data from the given imagedata object onto the canvas.
... examples understanding putimagedata to understand what this algorithm does under the hood, here is an implementation on top of canvasrenderingcontext2d.fillrect().
...data(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 127, 255, 1 ] after: uint8clampedarray(4) [ 255, 255, 255, 1 ] specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.putimagedata' in that specification.

CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... polyfill you can also use the settransform() method to reset the current transform to the identity matrix, like so: ctx.settransform(1, 0, 0, 1, 0, 0); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.resettransform' in that specification.

CanvasRenderingContext2D.restore() - Web APIs
the canvasrenderingcontext2d.restore() method of the canvas 2d api restores the most recently saved canvas state by popping the top entry in the drawing state stack.
... fore more information about the drawing state, see canvasrenderingcontext2d.save().
...avascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.restore' in that specification.

CanvasRenderingContext2D.setTransform() - Web APIs
the canvasrenderingcontext2d.settransform() method of the canvas 2d api resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method.
...we apply a transform to the first one's context using the first type of settransform() and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.gettransform().
...es[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.settransform' in that specification.

CanvasRenderingContext2D.strokeText() - Web APIs
the canvasrenderingcontext2d method stroketext(), part of the canvas 2d api, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates.
... syntax canvasrenderingcontext2d.stroketext(text, x, y [, maxwidth]); parameters text a domstring specifying the text string to render into the context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification.

ImageBitmapRenderingContext - Web APIs
the imagebitmaprenderingcontext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given imagebitmap.
... methods imagebitmaprenderingcontext.transferfromimagebitmap() displays the given imagebitmap in the canvas associated with this rendering context.
... specifications specification status comment html living standardthe definition of 'imagebitmaprenderingcontext' in that specification.

WebGLRenderingContext.canvas - Web APIs
the webglrenderingcontext.canvas property is a read-only reference to the htmlcanvaselement or offscreencanvas object that is associated with the context.
... examples canvas element given this <canvas> element: <canvas id="canvas"></canvas> you can get back a reference to it from the webglrenderingcontext using the canvas property: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.canvas; // htmlcanvaselement offscreen canvas example using the experimental offscreencanvas object.
... var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); gl.canvas; // offscreencanvas specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.canvas' in that specification.

WebGLRenderingContext.commit() - Web APIs
the webglrenderingcontext.commit() method pushes frames back to the original htmlcanvaselement, if the context is not directly fixed to a specific canvas.
... syntax void webglrenderingcontext.commit() examples var htmlcanvas = document.createelement('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcontext('webgl'); // ...
... // push frames back to the original htmlcanvaselement gl.commit(); specifications specification status comment html living standardthe definition of 'the commit() method of the offscreencanvas object's rendering context' in that specification.

WebGLRenderingContext.getExtension() - Web APIs
the webglrenderingcontext.getextension() method enables a webgl extension.
... return value a webgl extension object, or null if name does not match (case-insensitive) to one of the strings in webglrenderingcontext.getsupportedextensions.
...gl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.getextension' in that specification.

WebGLRenderingContext.getParameter() - Web APIs
the webglrenderingcontext.getparameter() method of the webgl api returns a value for the passed parameter name.
... parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext.
...gnment glint gl.unpack_colorspace_conversion_webgl glenum gl.unpack_flip_y_webgl glboolean gl.unpack_premultiply_alpha_webgl glboolean gl.vendor domstring gl.version domstring gl.viewport int32array (with 4 elements) webgl 2 you can query the following pname parameters when using a webgl2renderingcontext.

WebGLRenderingContext.getSupportedExtensions() - Web APIs
the webglrenderingcontext.getsupportedextensions() method returns a list of all the supported webgl extensions.
...] see also the webglrenderingcontext.getextension() method to get a specific extension object.
...gl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.getsupportedextensions' in that specification.

WebGLRenderingContext.getVertexAttrib() - Web APIs
the webglrenderingcontext.getvertexattrib() method of the webgl api returns information about a vertex attribute at a given position.
... gl.vertex_attrib_array_divisor: returns a glint describing the frequency divisor used for instanced rendering.
... when using the angle_instanced_arrays extension: ext.vertex_attrib_array_divisor_angle: returns a glint describing the frequency divisor used for instanced rendering.

WebGLRenderingContext.isContextLost() - Web APIs
the webglrenderingcontext.iscontextlost() method returns a boolean indicating whether or not the webgl context has been lost and must be re-established before rendering can resume.
... usage notes there are several reasons why a webgl context may be lost, making it necessary to re-establish the context before resuming rendering.
...e, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if (!gl.getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.iscontextlost' in that specification.

WebGLRenderingContext.pixelStorei() - Web APIs
the webglrenderingcontext.pixelstorei() method of the webgl api specifies the pixel storage modes.
...opengl es 3.0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 examples setting the pixel storage mode affects the webglrenderingcontext.readpixels() operations, as well as unpacking of textures with the webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d() methods.
... var tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); gl.pixelstorei(gl.pack_alignment, 4); to check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with webglrenderingcontext.getparameter().

CanvasRenderingContext2D.arc() - Web APIs
the canvasrenderingcontext2d.arc() method of the canvas 2d api adds a circular arc to the current sub-path.
...* j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } result screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.arc' in that specification.

CanvasRenderingContext2D.arcTo() - Web APIs
the canvasrenderingcontext2d.arcto() method of the canvas 2d api adds a circular arc to the current sub-path, using the given control points and radius.
...e let pi2 = math.pi * 2; const loop = function (t) { t0 = t / 1000; a = t0 % pi2; rr = math.abs(math.cos(a) * r); ctx.clearrect(0, 0, canvas.width, canvas.height); drawarc([p1, p2, p3], rr); drawpoints([p1, p2, p3]); requestanimationframe(loop); } loop(0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.arcto' in that specification.

CanvasRenderingContext2D.bezierCurveTo() - Web APIs
the canvasrenderingcontext2d.beziercurveto() method of the canvas 2d api adds a cubic bézier curve to the current sub-path.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.

CanvasRenderingContext2D.canvas - Web APIs
the canvasrenderingcontext2d.canvas property, part of the canvas api, is a read-only reference to the htmlcanvaselement object that is associated with a given context.
...you can get a reference to the canvas element within the canvasrenderingcontext2d by using the canvas property: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.canvas // htmlcanvaselement specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.canvas' in that specification.

CanvasRenderingContext2D.clearRect() - Web APIs
the canvasrenderingcontext2d.clearrect() method of the canvas 2d api erases the pixels in a rectangular area by setting them to transparent black.
...#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.

CanvasRenderingContext2D.clip() - Web APIs
the canvasrenderingcontext2d.clip() method of the canvas 2d api turns the current or given path into the current clipping region.
...= canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.

CanvasRenderingContext2D.closePath() - Web APIs
the canvasrenderingcontext2d.closepath() method of the canvas 2d api attempts to add a straight line from the current point to the start of the current sub-path.
...getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.

CanvasRenderingContext2D.createImageData() - Web APIs
the canvasrenderingcontext2d.createimagedata() method of the canvas 2d api creates a new, blank imagedata object with the specified dimensions.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createimagedata' in that specification.

CanvasRenderingContext2D.createLinearGradient() - Web APIs
the canvasrenderingcontext2d.createlineargradient() method of the canvas 2d api creates a gradient along the line connecting two given coordinates.
...= ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specification.

CanvasRenderingContext2D.createRadialGradient() - Web APIs
the canvasrenderingcontext2d.createradialgradient() method of the canvas 2d api creates a radial gradient using the size and coordinates of two circles.
...teradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createradialgradient' in that specification.

CanvasRenderingContext2D.direction - Web APIs
the canvasrenderingcontext2d.direction property of the canvas 2d api specifies the current text direction used to draw text.
... html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.

CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
the canvasrenderingcontext2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified element is focused.
...'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.drawfocusifneeded' in that specification.

CanvasRenderingContext2D.drawImage() - Web APIs
the canvasrenderingcontext2d.drawimage() method of the canvas 2d api provides different ways to draw an image onto the canvas.
...en in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'll have to specify the scale parameters // using the element's width and height properties - lets draw one // on top in the corner: ctx.drawimage(this, 0, 0, this.width, this.height); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d: drawimage' in that specification.

CanvasRenderingContext2D.drawWindow() - Web APIs
the deprecated, non-standard and internal only canvasrenderingcontext2d.drawwindow() method of the canvas 2d api renders a region of a window into the canvas.
... if an opaque color is used for the background color, rendering will be faster because we won't have to compute the window's transparency.

CanvasRenderingContext2D.ellipse() - Web APIs
the canvasrenderingcontext2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path.
...ath.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.

CanvasRenderingContext2D.fill() - Web APIs
the canvasrenderingcontext2d.fill() method of the canvas 2d api fills the current or given path with the current fillstyle.
...// create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.

CanvasRenderingContext2D.fillRect() - Web APIs
the canvasrenderingcontext2d.fillrect() method of the canvas 2d api draws a rectangle that is filled according to the current fillstyle.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillrect(0, 0, canvas.width, canvas.height); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fillrect' in that specification.

CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, gradient, or pattern to use inside shapes.
...'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fillstyle' in that specification.

CanvasRenderingContext2D.filter - Web APIs
the canvasrenderingcontext2d.filter property of the canvas 2d api provides filter effects such as blurring and grayscaling.
...cument.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.

CanvasRenderingContext2D.font - Web APIs
the canvasrenderingcontext2d.font property of the canvas 2d api specifies the current text style to use when drawing text.
... let f = new fontface('test', 'url(x)'); f.load().then(function() { // ready to use the font in a canvas context }); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.font' in that specification.

CanvasRenderingContext2D.getImageData() - Web APIs
the canvasrenderingcontext2d method getimagedata() of the canvas 2d api returns an imagedata object representing the underlying pixel data for a specified portion of the canvas.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.putimagedata(imagedata, 150, 10); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.

CanvasRenderingContext2D.getLineDash() - Web APIs
the getlinedash() method of the canvas 2d api's canvasrenderingcontext2d interface gets the current line dash pattern.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([10, 20]); console.log(ctx.getlinedash()); // [10, 20] // draw a dashed line ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getlinedash' in that specification.

CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
... '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.

CanvasRenderingContext2D.globalCompositeOperation - Web APIs
the canvasrenderingcontext2d.globalcompositeoperation property of the canvas 2d api sets the type of compositing operation to apply when drawing new shapes.
...d="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalcompositeoperation' in that specification.

CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
...w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); }; result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.imagesmoothingenabled' in that specification.

CanvasRenderingContext2D.isPointInPath() - Web APIs
the canvasrenderingcontext2d.ispointinpath() method of the canvas 2d api reports whether or not the specified point is contained in the current path.
... // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ispointinpath' in that specification.

CanvasRenderingContext2D.isPointInStroke() - Web APIs
the canvasrenderingcontext2d.ispointinstroke() method of the canvas 2d api reports whether or not the specified point is inside the area contained by the stroking of a path.
...'s stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ispointinstroke' in that specification.

CanvasRenderingContext2D.lineCap - Web APIs
the canvasrenderingcontext2d.linecap property of the canvas 2d api determines the shape used to draw the end points of lines.
...(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25 + i * 50, 10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linecap' in that specification.

CanvasRenderingContext2D.lineDashOffset - Web APIs
the canvasrenderingcontext2d.linedashoffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method.
...tion draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linedashoffset' in that specification.

CanvasRenderingContext2D.lineJoin - Web APIs
the canvasrenderingcontext2d.linejoin property of the canvas 2d api determines the shape used to join two line segments where they meet.
...(let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.

CanvasRenderingContext2D.lineTo() - Web APIs
the canvasrenderingcontext2d method lineto(), part of the canvas 2d api, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
...ml <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.

CanvasRenderingContext2D.lineWidth - Web APIs
the canvasrenderingcontext2d.linewidth property of the canvas 2d api sets the thickness of lines.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linewidth' in that specification.

CanvasRenderingContext2D.measureText() - Web APIs
the canvasrenderingcontext2d.measuretext() method returns a textmetrics object that contains information about the measured text (such as its width, for example).
...you can get a textmetrics object using the following code: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let text = ctx.measuretext('hello world'); console.log(text.width); // 56; specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.measuretext' in that specification.

CanvasRenderingContext2D.miterLimit - Web APIs
the canvasrenderingcontext2d.miterlimit property of the canvas 2d api sets the miter limit ratio.
...ue); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.

CanvasRenderingContext2D.moveTo() - Web APIs
the canvasrenderingcontext2d.moveto() method of the canvas 2d api begins a new sub-path at the point specified by the given (x, y) coordinates.
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(50, 50); // begin first sub-path ctx.lineto(200, 50); ctx.moveto(50, 90); // begin second sub-path ctx.lineto(280, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification.

CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
the canvasrenderingcontext2d.quadraticcurveto() method of the canvas 2d api adds a quadratic bézier curve to the current sub-path.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.

CanvasRenderingContext2D.rect() - Web APIs
the canvasrenderingcontext2d.rect() method of the canvas 2d api adds a rectangle to the current path.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 20, 150, 100); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rect' in that specification.

CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rotate' in that specification.

CanvasRenderingContext2D.save() - Web APIs
the canvasrenderingcontext2d.save() method of the canvas 2d api saves the entire state of the canvas by pushing the current state onto a stack.
...avascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.save' in that specification.

CanvasRenderingContext2D.scale() - Web APIs
the canvasrenderingcontext2d.scale() method of the canvas 2d api adds a scaling transformation to the canvas units horizontally and/or vertically.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification.

CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
the canvasrenderingcontext2d.scrollpathintoview() method of the canvas 2d api scrolls the current or given path into view.
...; eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.

CanvasRenderingContext2D.setLineDash() - Web APIs
the setlinedash() method of the canvas 2d api's canvasrenderingcontext2d interface sets the line dash pattern used when stroking lines.
...ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.setlinedash' in that specification.

CanvasRenderingContext2D.shadowBlur - Web APIs
the canvasrenderingcontext2d.shadowblur property of the canvas 2d api specifies the amount of blur applied to shadows.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblur' in that specification.

CanvasRenderingContext2D.shadowColor - Web APIs
the canvasrenderingcontext2d.shadowcolor property of the canvas 2d api specifies the color of shadows.
...x.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.

CanvasRenderingContext2D.shadowOffsetX - Web APIs
the canvasrenderingcontext2d.shadowoffsetx property of the canvas 2d api specifies the distance that shadows will be offset horizontally.
...id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsetx' in that specification.

CanvasRenderingContext2D.shadowOffsetY - Web APIs
the canvasrenderingcontext2d.shadowoffsety property of the canvas 2d api specifies the distance that shadows will be offset vertically.
... id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 80); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.

CanvasRenderingContext2D.stroke() - Web APIs
the canvasrenderingcontext2d.stroke() method of the canvas 2d api strokes (outlines) the current or given path with the current stroke style.
...st ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.

CanvasRenderingContext2D.strokeRect() - Web APIs
the canvasrenderingcontext2d.strokerect() method of the canvas 2d api draws a rectangle that is stroked (outlined) according to the current strokestyle and other context settings.
...s id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.

CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes.
... ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that specification.

CanvasRenderingContext2D.textAlign - Web APIs
the canvasrenderingcontext2d.textalign property of the canvas 2d api specifies the current text alignment used when drawing text.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.

CanvasRenderingContext2D.textBaseline - Web APIs
the canvasrenderingcontext2d.textbaseline property of the canvas 2d api specifies the current text baseline used when drawing text.
...le = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 75 + index * 75; ctx.beginpath(); ctx.moveto(0, y + 0.5); ctx.lineto(550, y + 0.5); ctx.stroke(); ctx.filltext('abcdefghijklmnop (' + baseline + ')', 0, y); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textbaseline' in that specification.

CanvasRenderingContext2D.transform() - Web APIs
the canvasrenderingcontext2d.transform() method of the canvas 2d api multiplies the current transformation with the matrix described by the arguments of this method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.

CanvasRenderingContext2D.translate() - Web APIs
the canvasrenderingcontext2d.translate() method of the canvas 2d api adds a translation transformation to the current matrix.
... specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.translate' in that specification.

ImageBitmapRenderingContext.transferFromImageBitmap() - Web APIs
the imagebitmaprenderingcontext.transferfromimagebitmap() method displays the given imagebitmap in the canvas associated with this rendering context.
... syntax void imagebitmaprenderingcontext.transferfromimagebitmap(bitmap) parameters bitmap an imagebitmap object to transfer.

WebGL2RenderingContext.createQuery() - Web APIs
the webgl2renderingcontext.createquery() method of the webgl 2 api creates and initializes webglquery objects, which provide ways to asynchronously query for information.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.createSampler() - Web APIs
the webgl2renderingcontext.createsampler() method of the webgl 2 api creates and initializes webglsampler objects.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.createTransformFeedback() - Web APIs
the webgl2renderingcontext.createtransformfeedback() method of the webgl 2 api creates and initializes webgltransformfeedback objects.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.deleteQuery() - Web APIs
the webgl2renderingcontext.deletequery() method of the webgl 2 api deletes a given webglquery object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.deleteSampler() - Web APIs
the webgl2renderingcontext.deletesampler() method of the webgl 2 api deletes a given webglsampler object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.deleteSync() - Web APIs
the webgl2renderingcontext.deletesync() method of the webgl 2 api deletes a given webglsync object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
the webgl2renderingcontext.deletetransformfeedback() method of the webgl 2 api deletes a given webgltransformfeedback object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.fenceSync() - Web APIs
the webgl2renderingcontext.fencesync() method of the webgl 2 api creates a new webglsync object and inserts it into the gl command stream.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
the webgl2renderingcontext.framebuffertexturelayer() method of the webgl 2 api attaches a single layer of a texture to a framebuffer.
... this method is similar to webglrenderingcontext.framebuffertexture2d(), but only a given single layer of the texture level is attached to the attachment point.

WebGL2RenderingContext.isQuery() - Web APIs
the webgl2renderingcontext.isquery() method of the webgl 2 api returns true if the passed object is a valid webglquery object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.isSampler() - Web APIs
the webgl2renderingcontext.issampler() method of the webgl 2 api returns true if the passed object is a valid webglsampler object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.isSync() - Web APIs
the webgl2renderingcontext.issync() method of the webgl 2 api returns true if the passed object is a valid webglsync object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.isTransformFeedback() - Web APIs
the webgl2renderingcontext.istransformfeedback() method of the webgl 2 api returns true if the passed object is a valid webgltransformfeedback object.
... examples gl must be a webgl2renderingcontext.

WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
the webgl2renderingcontext.vertexattribipointer() method of the webgl 2 api specifies integer data formats and locations of vertex attributes in a vertex attributes array.
... description very similar to webglrenderingcontext.vertexattribpointer().

WebGLRenderingContext.bindFramebuffer() - Web APIs
the webglrenderingcontext.bindframebuffer() method of the webgl api binds a given webglframebuffer to a target.
...used as a destination for drawing, rendering, clearing, and writing operations.

WebGLRenderingContext.blendFunc() - Web APIs
the webglrenderingcontext.blendfunc() method of the webgl api defines which function is used for blending pixel arithmetic.
... examples to use the blend function, you first have to activate blending with webglrenderingcontext.enable() with the argument gl.blend.

WebGLRenderingContext.blendFuncSeparate() - Web APIs
the webglrenderingcontext.blendfuncseparate() method of the webgl api defines which function is used for blending pixel arithmetic for rgb and alpha components separately.
... examples to use the blend function, you first have to activate blending with webglrenderingcontext.enable() with the argument gl.blend.

WebGLRenderingContext.bufferData() - Web APIs
the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store.
... examples using bufferdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); getting buffer information to check the current buffer usage and buffer size, use the webglrenderingcontext.getbufferparameter() method.

WebGLRenderingContext.checkFramebufferStatus() - Web APIs
the webglrenderingcontext.checkframebufferstatus() method of the webgl api returns the completeness status of the webglframebuffer object.
...used as a destination for drawing, rendering, clearing, and writing operations.

WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used.

WebGLRenderingContext.createRenderbuffer() - Web APIs
the webglrenderingcontext.createrenderbuffer() method of the webgl api creates and initializes a webglrenderbuffer object.
... return value a webglrenderbuffer object that stores data such an image, or can be source or target of an rendering operation.

WebGLRenderingContext.drawingBufferHeight - Web APIs
the read-only webglrenderingcontext.drawingbufferheight property represents the actual height of the current drawing buffer.
... syntax gl.drawingbufferheight; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the height of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferheight; // 150 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferheight' in that specification.

WebGLRenderingContext.drawingBufferWidth - Web APIs
the read-only webglrenderingcontext.drawingbufferwidth property represents the actual width of the current drawing buffer.
... syntax gl.drawingbufferwidth; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the width of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferwidth; // 300 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferwidth' in that specification.

WebGLRenderingContext.enableVertexAttribArray() - Web APIs
the webglrenderingcontext method enablevertexattribarray(), part of the webgl api, turns on the generic vertex attribute array at the specified index into the list of attribute arrays.
... webglrenderingcontext.invalid_value the specified index is invalid; that is, it's greater than or equal to the maximum number of entries permitted in the context's vertex attribute list, as indicated by the value of webglrenderingcontext.max_vertex_attribs.

WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
the webglrenderingcontext.framebufferrenderbuffer() method of the webgl api attaches a webglrenderbuffer object to a webglframebuffer object.
...used as a destination for drawing, rendering, clearing, and writing operations.

WebGLRenderingContext.framebufferTexture2D() - Web APIs
the webglrenderingcontext.framebuffertexture2d() method of the webgl api attaches a texture to a webglframebuffer.
...used as a destination for drawing, rendering, clearing, and writing operations.

WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.getactiveuniform() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a uniform attribute.
... syntax webglactiveinfo webglrenderingcontext.getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information.

WebGLRenderingContext.getContextAttributes() - Web APIs
the webglrenderingcontext.getcontextattributes() method returns a webglcontextattributes object that contains the actual context parameters.
... specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.getcontextattributes' in that specification.

WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
the webglrenderingcontext.getframebufferattachmentparameter() method of the webgl api returns information about a framebuffer's attachment.
...used as a destination for drawing, rendering, clearing, and writing operations.

WebGLRenderingContext.getUniformLocation() - Web APIs
part of the webgl api, the webglrenderingcontext method getuniformlocation() returns the location of a specific uniform variable which is part of a given webglprogram.
... syntax webgluniformlocation = webglrenderingcontext.getuniformlocation(program, name); parameters program the webglprogram in which to locate the specified uniform variable.

WebGLRenderingContext.hint() - Web APIs
the webglrenderingcontext.hint() method of the webgl api specifies hints for certain behaviors.
...possible values: gl.generate_mipmap_hint: quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().

WebGLRenderingContext.stencilFunc() - Web APIs
the webglrenderingcontext.stencilfunc() method of the webgl api sets the front and back function and reference value for stencil testing.
...it is typically used in multipass rendering to achieve special effects.

WebGLRenderingContext.stencilFuncSeparate() - Web APIs
the webglrenderingcontext.stencilfuncseparate() method of the webgl api sets the front and/or back function and reference value for stencil testing.
...it is typically used in multipass rendering to achieve special effects.

WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmask() method of the webgl api controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
... the webglrenderingcontext.stencilmaskseparate() method can set front and back stencil writemasks to different values.

WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method of the webgl api controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
... the webglrenderingcontext.stencilmask() method can set both, the front and back stencil writemasks to one value at the same time.

WebGLRenderingContext.stencilOp() - Web APIs
the webglrenderingcontext.stencilop() method of the webgl api sets both the front and back-facing stencil test actions.
... gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc().

WebGLRenderingContext.stencilOpSeparate() - Web APIs
the webglrenderingcontext.stencilopseparate() method of the webgl api sets the front and/or back-facing stencil test actions.
... gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc().

WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the webglrenderingcontext.uniform[1234][fi][v]() methods of the webgl api specify values of uniform variables.
... many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[1234][uif][v]().

WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the webglrenderingcontext.uniformmatrix[234]fv() methods of the webgl api specify matrix values for uniform variables.
... syntax webglrenderingcontext.uniformmatrix2fv(location, transpose, value); webglrenderingcontext.uniformmatrix3fv(location, transpose, value); webglrenderingcontext.uniformmatrix4fv(location, transpose, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.

Rendering engine - MDN Web Docs Glossary: Definitions of Web-related terms
a rendering engine is software that draws text and images on the screen.

nsIDOMCanvasRenderingContext2D
the nsidomcanvasrenderingcontext2d interface implements the dom canvasrenderingcontext2d interface.

CanvasRenderingContext2D.addHitRegion() - Web APIs
the canvasrenderingcontext2d method addhitregion() adds a hit region to the bitmap.

CanvasRenderingContext2D.clearHitRegions() - Web APIs
the canvasrenderingcontext2d method clearhitregions() removes all hit regions from the canvas.

CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or svgmatrix (old specification) object for the current transformation matrix.

CanvasRenderingContext2D.drawWidgetAsOnScreen() - Web APIs
the non-standard and internal only canvasrenderingcontext2d.drawwidgetasonscreen() method of the canvas 2d api renders the root widget of a window into the canvas.

CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
the imagesmoothingquality property of the canvasrenderingcontext2d interface, part of the canvas api, lets you set the quality of image smoothing.

CanvasRenderingContext2D.removeHitRegion() - Web APIs
the canvasrenderingcontext2d method removehitregion() removes a given hit region from the canvas.

WebGL2RenderingContext.beginQuery() - Web APIs
the webgl2renderingcontext.beginquery() method of the webgl 2 api starts an asynchronous query.

WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the webgl2renderingcontext.begintransformfeedback() method of the webgl 2 api starts a transform feedback operation.

WebGL2RenderingContext.bindBufferBase() - Web APIs
the webgl2renderingcontext.bindbufferbase() method of the webgl 2 api binds a given webglbuffer to a given binding point (target) at a given index.

WebGL2RenderingContext.bindBufferRange() - Web APIs
the webgl2renderingcontext.bindbufferrange() method of the webgl 2 api binds a range of a given webglbuffer to a given binding point (target) at a given index.

WebGL2RenderingContext.bindSampler() - Web APIs
the webgl2renderingcontext.bindsampler() method of the webgl 2 api binds a passed webglsampler object to the texture unit at the passed index.

WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the webgl2renderingcontext.bindtransformfeedback() method of the webgl 2 api binds a passed webgltransformfeedback object to the current gl state.

WebGL2RenderingContext.bindVertexArray() - Web APIs
the webgl2renderingcontext.bindvertexarray() method of the webgl 2 api binds a passed webglvertexarrayobject object to the buffer.

WebGL2RenderingContext.blitFramebuffer() - Web APIs
the webgl2renderingcontext.blitframebuffer() method of the webgl 2 api transfers a block of pixels from the read framebuffer to the draw framebuffer.

WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
the webgl2renderingcontext.clearbuffer[fiuv]() methods of the webgl 2 api clear buffers from the currently bound framebuffer.

WebGL2RenderingContext.clientWaitSync() - Web APIs
the webgl2renderingcontext.clientwaitsync() method of the webgl 2 api blocks and waits for a webglsync object to become signaled or a given timeout to be passed.

WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format.

WebGL2RenderingContext.copyBufferSubData() - Web APIs
the webgl2renderingcontext.copybuffersubdata() method of the webgl 2 api copies part of the data of a buffer to another buffer.

WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
the webgl2renderingcontext.copytexsubimage3d() method of the webgl api copies pixels from the current webglframebuffer into an existing 3d texture sub-image.

WebGL2RenderingContext.createVertexArray() - Web APIs
the webgl2renderingcontext.createvertexarray() method of the webgl 2 api creates and initializes a webglvertexarrayobject object that represents a vertex array object (vao) pointing to vertex array data and which provides names for different sets of vertex data.

WebGL2RenderingContext.deleteVertexArray() - Web APIs
the webgl2renderingcontext.deletevertexarray() method of the webgl 2 api deletes a given webglvertexarrayobject object.

WebGL2RenderingContext.drawArraysInstanced() - Web APIs
the webgl2renderingcontext.drawarraysinstanced() method of the webgl 2 api renders primitives from array data like the gl.drawarrays() method.

WebGL2RenderingContext.drawBuffers() - Web APIs
the webgl2renderingcontext.drawbuffers() method of the webgl 2 api defines draw buffers to which fragment colors are written into.

WebGL2RenderingContext.drawElementsInstanced() - Web APIs
the webgl2renderingcontext.drawelementsinstanced() method of the webgl 2 api renders primitives from array data like the gl.drawelements() method.

WebGL2RenderingContext.drawRangeElements() - Web APIs
the webgl2renderingcontext.drawrangeelements() method of the webgl api renders primitives from array data in a given range.

WebGL2RenderingContext.endQuery() - Web APIs
the webgl2renderingcontext.endquery() method of the webgl 2 api marks the end of a given query target.

WebGL2RenderingContext.endTransformFeedback() - Web APIs
the webgl2renderingcontext.endtransformfeedback() method of the webgl 2 api ends a transform feedback operation.

WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
the webgl2renderingcontext.getactiveuniformblockname() method of the webgl 2 api retrieves the name of the active uniform block at a given index within a webglprogram.

WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the webgl2renderingcontext.getactiveuniformblockparameter() method of the webgl 2 api retrieves information about an active uniform block within a webglprogram.

WebGL2RenderingContext.getActiveUniforms() - Web APIs
the webgl2renderingcontext.getactiveuniforms() method of the webgl 2 api retrieves information about active uniforms within a webglprogram.

WebGL2RenderingContext.getBufferSubData() - Web APIs
the webgl2renderingcontext.getbuffersubdata() method of the webgl 2 api reads data from a buffer binding point and writes them to an arraybuffer or sharedarraybuffer.

WebGL2RenderingContext.getFragDataLocation() - Web APIs
the webgl2renderingcontext.getfragdatalocation() method of the webgl 2 api returns the binding of color numbers to user-defined varying out variables.

WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.getindexedparameter() method of the webgl 2 api returns indexed information about a given target.

WebGL2RenderingContext.getInternalformatParameter() - Web APIs
the webgl2renderingcontext.getinternalformatparameter() method of the webgl 2 api returns information about implementation-dependent support for internal formats.

WebGL2RenderingContext.getQuery() - Web APIs
the webgl2renderingcontext.getquery() method of the webgl 2 api returns the currently active webglquery for the target, or null.

WebGL2RenderingContext.getQueryParameter() - Web APIs
the webgl2renderingcontext.getqueryparameter() method of the webgl 2 api returns parameter information of a webglquery object.

WebGL2RenderingContext.getSamplerParameter() - Web APIs
the webgl2renderingcontext.getsamplerparameter() method of the webgl 2 api returns parameter information of a webglsampler object.

WebGL2RenderingContext.getSyncParameter() - Web APIs
the webgl2renderingcontext.getsyncparameter() method of the webgl 2 api returns parameter information of a webglsync object.

WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettransformfeedbackvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeedback buffers.

WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
the webgl2renderingcontext.getuniformblockindex() method of the webgl 2 api retrieves the index of a uniform block within a webglprogram.

WebGL2RenderingContext.getUniformIndices() - Web APIs
the webgl2renderingcontext.getuniformindices() method of the webgl 2 api retrieves the indices of a number of uniforms within a webglprogram.

WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
the webgl2renderingcontext.invalidateframebuffer() method of the webgl 2 api invalidates the contents of attachments in a framebuffer.

WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
the webgl2renderingcontext.invalidatesubframebuffer() method of the webgl 2 api invalidates portions of the contents of attachments in a framebuffer.

WebGL2RenderingContext.isVertexArray() - Web APIs
the webgl2renderingcontext.isvertexarray() method of the webgl api returns true if the passed object is a valid webglvertexarrayobject object.

WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the webgl2renderingcontext.pausetransformfeedback() method of the webgl 2 api pauses a transform feedback operation.

WebGL2RenderingContext.readBuffer() - Web APIs
the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.

WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
the webgl2renderingcontext.renderbufferstoragemultisample() method of the webgl 2 api returns creates and initializes a renderbuffer object's data store and allows specifying a number of samples to be used.

WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the webgl2renderingcontext.resumetransformfeedback() method of the webgl 2 api resumes a transform feedback operation.

WebGL2RenderingContext.samplerParameter[if]() - Web APIs
the webgl2renderingcontext.samplerparameter[if]() methods of the webgl 2 api set webglsampler parameters.

WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image.

WebGL2RenderingContext.texStorage2D() - Web APIs
the webgl2renderingcontext.texstorage2d() method of the webgl api specifies all levels of two-dimensional texture storage.

WebGL2RenderingContext.texStorage3D() - Web APIs
the webgl2renderingcontext.texstorage3d() method of the webgl api specifies all levels of a three-dimensional texture or two-dimensional array texture.

WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture.

WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the webgl2renderingcontext.transformfeedbackvaryings() method of the webgl 2 api specifies values to record in webgltransformfeedback buffers.

WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uniform[1234][uif][v]() methods of the webgl api specify values of uniform variables.

WebGL2RenderingContext.uniformBlockBinding() - Web APIs
the webgl2renderingcontext.uniformblockbinding() method of the webgl 2 api assigns binding points for active uniform blocks.

WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables.

WebGL2RenderingContext.vertexAttribDivisor() - Web APIs
the webgl2renderingcontext.vertexattribdivisor() method of the webgl 2 api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawarraysinstanced() and gl.drawelementsinstanced().

WebGL2RenderingContext.vertexAttribI4[u]i[v]() - Web APIs
the webgl2renderingcontext.vertexattribi4[u]i[v]() methods of the webgl 2 api specify integer values for generic vertex attributes.

WebGL2RenderingContext.waitSync() - Web APIs
the webgl2renderingcontext.waitsync() method of the webgl 2 api returns immediately, but waits on the gl server until the given webglsync object is signaled.

WebGLRenderingContext.activeTexture() - Web APIs
the webglrenderingcontext.activetexture() method of the webgl api specifies which texture unit to make active.

WebGLRenderingContext.attachShader() - Web APIs
the webglrenderingcontext.attachshader() method of the webgl api attaches either a fragment or vertex webglshader to a webglprogram.

WebGLRenderingContext.bindAttribLocation() - Web APIs
the webglrenderingcontext.bindattriblocation() method of the webgl api binds a generic vertex index to an attribute variable.

WebGLRenderingContext.bindBuffer() - Web APIs
the webglrenderingcontext.bindbuffer() method of the webgl api binds a given webglbuffer to a target.

WebGLRenderingContext.bindRenderbuffer() - Web APIs
the webglrenderingcontext.bindrenderbuffer() method of the webgl api binds a given webglrenderbuffer to a target, which must be gl.renderbuffer.

WebGLRenderingContext.bindTexture() - Web APIs
the webglrenderingcontext.bindtexture() method of the webgl api binds a given webgltexture to a target (binding point).

WebGLRenderingContext.blendColor() - Web APIs
the webglrenderingcontext.blendcolor() method of the webgl api is used to set the source and destination blending factors.

WebGLRenderingContext.blendEquation() - Web APIs
the webglrenderingcontext.blendequation() method of the webgl api is used to set both the rgb blend equation and alpha blend equation to a single equation.

WebGLRenderingContext.blendEquationSeparate() - Web APIs
the webglrenderingcontext.blendequationseparate() method of the webgl api is used to set the rgb blend equation and alpha blend equation separately.

WebGLRenderingContext.bufferSubData() - Web APIs
the webglrenderingcontext.buffersubdata() method of the webgl api updates a subset of a buffer object's data store.

WebGLRenderingContext.clear() - Web APIs
the webglrenderingcontext.clear() method of the webgl api clears buffers to preset values.

WebGLRenderingContext.clearColor() - Web APIs
the webglrenderingcontext.clearcolor() method of the webgl api specifies the color values used when clearing color buffers.

WebGLRenderingContext.clearDepth() - Web APIs
the webglrenderingcontext.cleardepth() method of the webgl api specifies the clear value for the depth buffer.

WebGLRenderingContext.clearStencil() - Web APIs
the webglrenderingcontext.clearstencil() method of the webgl api specifies the clear value for the stencil buffer.

WebGLRenderingContext.colorMask() - Web APIs
the webglrenderingcontext.colormask() method of the webgl api sets which color components to enable or to disable when drawing or rendering to a webglframebuffer.

WebGLRenderingContext.compileShader() - Web APIs
the webglrenderingcontext.compileshader() method of the webgl api compiles a glsl shader into binary data so that it can be used by a webglprogram.

WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed format.

WebGLRenderingContext.copyTexImage2D() - Web APIs
the webglrenderingcontext.copyteximage2d() method of the webgl api copies pixels from the current webglframebuffer into a 2d texture image.

WebGLRenderingContext.copyTexSubImage2D() - Web APIs
the webglrenderingcontext.copytexsubimage2d() method of the webgl api copies pixels from the current webglframebuffer into an existing 2d texture sub-image.

WebGLRenderingContext.createBuffer() - Web APIs
the webglrenderingcontext.createbuffer() method of the webgl api creates and initializes a webglbuffer storing data such as vertices or colors.

WebGLRenderingContext.createFramebuffer() - Web APIs
the webglrenderingcontext.createframebuffer() method of the webgl api creates and initializes a webglframebuffer object.

WebGLRenderingContext.createProgram() - Web APIs
the webglrenderingcontext.createprogram() method of the webgl api creates and initializes a webglprogram object.

WebGLRenderingContext.createShader() - Web APIs
the webglrenderingcontext method createshader() of the webgl api creates a webglshader that can then be configured further using webglrenderingcontext.shadersource() and webglrenderingcontext.compileshader().

WebGLRenderingContext.createTexture() - Web APIs
the webglrenderingcontext.createtexture() method of the webgl api creates and initializes a webgltexture object.

WebGLRenderingContext.cullFace() - Web APIs
the webglrenderingcontext.cullface() method of the webgl api specifies whether or not front- and/or back-facing polygons can be culled.

WebGLRenderingContext.deleteBuffer() - Web APIs
the webglrenderingcontext.deletebuffer() method of the webgl api deletes a given webglbuffer.

WebGLRenderingContext.deleteFramebuffer() - Web APIs
the webglrenderingcontext.deleteframebuffer() method of the webgl api deletes a given webglframebuffer object.

WebGLRenderingContext.deleteProgram() - Web APIs
the webglrenderingcontext.deleteprogram() method of the webgl api deletes a given webglprogram object.

WebGLRenderingContext.deleteRenderbuffer() - Web APIs
the webglrenderingcontext.deleterenderbuffer() method of the webgl api deletes a given webglrenderbuffer object.

WebGLRenderingContext.deleteShader() - Web APIs
the webglrenderingcontext.deleteshader() method of the webgl api marks a given webglshader object for deletion.

WebGLRenderingContext.deleteTexture() - Web APIs
the webglrenderingcontext.deletetexture() method of the webgl api deletes a given webgltexture object.

WebGLRenderingContext.depthFunc() - Web APIs
the webglrenderingcontext.depthfunc() method of the webgl api specifies a function that compares incoming pixel depth to the current depth buffer value.

WebGLRenderingContext.depthMask() - Web APIs
the webglrenderingcontext.depthmask() method of the webgl api sets whether writing into the depth buffer is enabled or disabled.

WebGLRenderingContext.depthRange() - Web APIs
the webglrenderingcontext.depthrange() method of the webgl api specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.

WebGLRenderingContext.detachShader() - Web APIs
the webglrenderingcontext.detachshader() method of the webgl api detaches a previously attached webglshader from a webglprogram.

WebGLRenderingContext.disableVertexAttribArray() - Web APIs
the webglrenderingcontext.disablevertexattribarray() method of the webgl api turns the generic vertex attribute array off at a given index position.

WebGLRenderingContext.drawArrays() - Web APIs
the webglrenderingcontext.drawarrays() method of the webgl api renders primitives from array data.

WebGLRenderingContext.drawElements() - Web APIs
the webglrenderingcontext.drawelements() method of the webgl api renders primitives from array data.

WebGLRenderingContext.finish() - Web APIs
the webglrenderingcontext.finish() method of the webgl api blocks execution until all previously called commands are finished.

WebGLRenderingContext.flush() - Web APIs
the webglrenderingcontext.flush() method of the webgl api empties different buffer commands, causing all commands to be executed as quickly as possible.

WebGLRenderingContext.frontFace() - Web APIs
the webglrenderingcontext.frontface() method of the webgl api specifies whether polygons are front- or back-facing by setting a winding orientation.

WebGLRenderingContext.generateMipmap() - Web APIs
the webglrenderingcontext.generatemipmap() method of the webgl api generates a set of mipmaps for a webgltexture object.

WebGLRenderingContext.getActiveAttrib() - Web APIs
the webglrenderingcontext.getactiveattrib() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a vertex attribute.

WebGLRenderingContext.getAttachedShaders() - Web APIs
the webglrenderingcontext.getattachedshaders() method of the webgl api returns a list of webglshader objects attached to a webglprogram.

WebGLRenderingContext.getAttribLocation() - Web APIs
the webglrenderingcontext.getattriblocation() method of the webgl api returns the location of an attribute variable in a given webglprogram.

WebGLRenderingContext.getBufferParameter() - Web APIs
the webglrenderingcontext.getbufferparameter() method of the webgl api returns information about the buffer.

WebGLRenderingContext.getError() - Web APIs
the webglrenderingcontext.geterror() method of the webgl api returns error information.

WebGLRenderingContext.getProgramInfoLog() - Web APIs
the webglrenderingcontext.getprograminfolog returns the information log for the specified webglprogram object.

WebGLRenderingContext.getProgramParameter() - Web APIs
the webglrenderingcontext.getprogramparameter() method of the webgl api returns information about the given program.

WebGLRenderingContext.getRenderbufferParameter() - Web APIs
the webglrenderingcontext.getrenderbufferparameter() method of the webgl api returns information about the renderbuffer.

WebGLRenderingContext.getShaderInfoLog() - Web APIs
the webglrenderingcontext.getshaderinfolog returns the information log for the specified webglshader object.

WebGLRenderingContext.getShaderParameter() - Web APIs
the webglrenderingcontext.getshaderparameter() method of the webgl api returns information about the given shader.

WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the webglrenderingcontext.getshaderprecisionformat() method of the webgl api returns a new webglshaderprecisionformat object describing the range and precision for the specified shader numeric format.

WebGLRenderingContext.getShaderSource() - Web APIs
the webglrenderingcontext.getshadersource() method of the webgl api returns the source code of a webglshader as a domstring.

WebGLRenderingContext.getTexParameter() - Web APIs
the webglrenderingcontext.gettexparameter() method of the webgl api returns information about the given texture.

WebGLRenderingContext.getUniform() - Web APIs
the webglrenderingcontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location.

WebGLRenderingContext.getVertexAttribOffset() - Web APIs
the webglrenderingcontext.getvertexattriboffset() method of the webgl api returns the address of a specified vertex attribute.

WebGLRenderingContext.isBuffer() - Web APIs
the webglrenderingcontext.isbuffer() method of the webgl api returns true if the passed webglbuffer is valid and false otherwise.

WebGLRenderingContext.isFramebuffer() - Web APIs
the webglrenderingcontext.isframebuffer() method of the webgl api returns true if the passed webglframebuffer is valid and false otherwise.

WebGLRenderingContext.isProgram() - Web APIs
the webglrenderingcontext.isprogram() method of the webgl api returns true if the passed webglprogram is valid, false otherwise.

WebGLRenderingContext.isRenderbuffer() - Web APIs
the webglrenderingcontext.isrenderbuffer() method of the webgl api returns true if the passed webglrenderbuffer is valid and false otherwise.

WebGLRenderingContext.isShader() - Web APIs
the webglrenderingcontext.isshader() method of the webgl api returns true if the passed webglshader is valid, false otherwise.

WebGLRenderingContext.isTexture() - Web APIs
the webglrenderingcontext.istexture() method of the webgl api returns true if the passed webgltexture is valid and false otherwise.

WebGLRenderingContext.lineWidth() - Web APIs
the webglrenderingcontext.linewidth() method of the webgl api sets the line width of rasterized lines.

WebGLRenderingContext.linkProgram() - Web APIs
the webglrenderingcontext interface's linkprogram() method links a given webglprogram, completing the process of preparing the gpu code for the program's fragment and vertex shaders.

WebGLRenderingContext.polygonOffset() - Web APIs
the webglrenderingcontext.polygonoffset() method of the webgl api specifies the scale factors and units to calculate depth values.

WebGLRenderingContext.readPixels() - Web APIs
the webglrenderingcontext.readpixels() method of the webgl api reads a block of pixels from a specified rectangle of the current color framebuffer into an arraybufferview object.

WebGLRenderingContext.renderbufferStorage() - Web APIs
the webglrenderingcontext.renderbufferstorage() method of the webgl api creates and initializes a renderbuffer object's data store.

WebGLRenderingContext.sampleCoverage() - Web APIs
the webglrenderingcontext.samplecoverage() method of the webgl api specifies multi-sample coverage parameters for anti-aliasing effects.

WebGLRenderingContext.scissor() - Web APIs
the webglrenderingcontext.scissor() method of the webgl api sets a scissor box, which limits the drawing to a specified rectangle.

WebGLRenderingContext.shaderSource() - Web APIs
the webglrenderingcontext.shadersource() method of the webgl api sets the source code of a webglshader.

WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image.

WebGLRenderingContext.texParameter[fi]() - Web APIs
the webglrenderingcontext.texparameter[fi]() methods of the webgl api set texture parameters.

WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture.

WebGLRenderingContext.useProgram() - Web APIs
the webglrenderingcontext.useprogram() method of the webgl api sets the specified webglprogram as part of the current rendering state.

WebGLRenderingContext.validateProgram() - Web APIs
the webglrenderingcontext.validateprogram() method of the webgl api validates a webglprogram.

WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
the webglrenderingcontext.vertexattrib[1234]f[v]() methods of the webgl api specify constant values for generic vertex attributes.

WebGLRenderingContext.vertexAttribPointer() - Web APIs
the webglrenderingcontext.vertexattribpointer() method of the webgl api binds the buffer currently bound to gl.array_buffer to a generic vertex attribute of the current vertex buffer object and specifies its layout.

WebGLRenderingContext.viewport() - Web APIs
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.

Index - Web APIs
5 angle_instanced_arrays.vertexattribdivisorangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.vertexattribdivisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().
... 143 audiolistener.dopplerfactor api, audio, audiolistener, deprecated, doppler, doppler effect, property, reference, web audio api, dopplerfactor, effects the deprecated dopplerfactor property of the audiolistener interface is a double value representing the amount of pitch shift to use when rendering a doppler effect.
...user-supplied code is run in the audioworkletglobalscope global execution context in a separate web audio rendering thread along with other nodes, allowing for zero-latency audio processing.
...And 297 more matches

WebGL constants - Web APIs
standard webgl constants are installed on the webglrenderingcontext and webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_width); some constants are also provided by webgl extensions.
... table of contents standard webgl 1 constants standard webgl 2 constants webgl extension constants standard webgl 1 constants these constants are defined on the webglrenderingcontext interface.
... clearing buffers constants passed to webglrenderingcontext.clear() to clear buffer masks.
...And 24 more matches

x - SVG: Scalable Vector Graphics
value list of <length> default value none animatable yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0% animatable yes fecolormatrix for <fecolormatrix>, x defines the minimum x coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0% animatable yes fecomponenttransfer for <fecomponenttransfer>, x defines the minimum x coordinate for the rendering area of the primitive.
...And 20 more matches

y - SVG: Scalable Vector Graphics
value list of <length> default value none animatable yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0% animatable yes fecolormatrix for <fecolormatrix>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0% animatable yes fecomponenttransfer for <fecomponenttransfer>, y defines the minimum y coordinate for the rendering area of the primitive.
...And 20 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
this will help to solidify your understanding of how the geometry of 3d graphics and vr work, as well as to help ensure you understand the way the functions and data that are used during xr rendering work together.
...rendering the scene for immersive presentation requires multiple renders of the scene—once from the perspective of each eye.
... when rendering the left eye, the xrwebgllayer has its viewport configured to restrict drawing to the left half of the drawing surface.
...And 17 more matches

height - SVG: Scalable Vector Graphics
>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
... value <length> | <percentage> default value 100% animatable yes fecolormatrix for <fecolormatrix>, height defines the vertical length for the rendering area of the primitive.
... value <length> | <percentage> default value 100% animatable yes fecomponenttransfer for <fecomponenttransfer>, height defines the vertical length for the rendering area of the primitive.
...And 17 more matches

width - SVG: Scalable Vector Graphics
>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
... value <length> | <percentage> default value 100% animatable yes fecolormatrix for <fecolormatrix>, width defines the horizontal length for the rendering area of the primitive.
... value <length> | <percentage> default value 100% animatable yes fecomponenttransfer for <fecomponenttransfer>, width defines the horizontal length for the rendering area of the primitive.
...And 17 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
31 blink glossary, infrastructure, layout, rendering engine blink is an open-source browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
... specifically, blink began as a fork of the webcore library in webkit, which handles layout, rendering, and dom, but now stands on its own as a separate rendering engine.
...both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website.
...And 10 more matches

TextMetrics - Web APIs
the textmetrics interface represents the dimensions of a piece of text in the canvas; a textmetrics() instance can be retrieved using the canvasrenderingcontext2d.measuretext() method.
... textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in css pixels.
... textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels.
...And 10 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
some examples of ways 3d cameras are used: when rendering animation—whether for filmmaking or for use within the context of a presentation or game—the virtual camera is used just like a real-world film camera.
... in business applications, the 3d camera is used to simply set the apparent size and perspective when rendering things such as graphs and charts.
... in advanced 3d games, a camera or camera-like object could be used to determine what a non-player character can see, relying on the same rendering and physics engine used by player characters for non-player characters.
...And 9 more matches

Browser detection using the user agent - HTTP
feature detection feature detection is where you don't try to figure out which browser is rendering your page, but instead, you check to see if the specific feature you need is available.
...prior to version 9, internet explorer had unbelievable issues with rendering bugs, css bugs, api bugs, and so forth.
... browser name when people say they want "browser detection", often they actually want "rendering engine detection".
...And 9 more matches

SVG documentation index - SVG: Scalable Vector Graphics
48 color-rendering svg, svg attribute the color-rendering attribute provides a hint to the svg user agent about how to optimize its color interpolation and compositing operations.
... 59 display svg, svg attribute the display attribute lets you control the rendering of graphical or container elements.
... 70 externalresourcesrequired deprecated, needsexample, svg, svg attribute the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element.
...And 9 more matches

Introduction to client-side frameworks - Learn web development
react itself is not technically a framework; it's a library for rendering ui components.
... we can examine the difficulty of this problem by looking at just one feature of our todo list app: rendering a list of tasks.
... the verbosity of dom changes building html elements and rendering them in the browser at the appropriate time takes a surprising amount of code.
...And 8 more matches

Index - Learn web development
275 componentizing our svelte app beginner, components, frameworks, javascript, learn, svelte, client-side, conditional rendering, passing data now we have all of our app's required functionality in place.
... 279 ember interactivity: footer functionality, conditional rendering beginner, ember, frameworks, javascript, learn, client-side, conditional rendering that's enough for now.
...next we'll move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked.
...And 7 more matches

HTMLCanvasElement.getContext() - Web APIs
possible values are: "2d", leading to the creation of a canvasrenderingcontext2d object representing a two-dimensional rendering context.
... "webgl" (or "experimental-webgl") which will create a webglrenderingcontext object representing a three-dimensional rendering context.
... "webgl2" which will create a webgl2renderingcontext object representing a three-dimensional rendering context.
...And 7 more matches

OffscreenCanvas - Web APIs
methods offscreencanvas.getcontext() returns a rendering context for the offscreen canvas.
... examples synchronous display of frames produced by an offscreencanvas one way to use the offscreencanvas api, is to use a renderingcontext that has been obtained from an offscreencanvas object to generate new frames.
... once a new frame has finished rendering in this context, the transfertoimagebitmap() method can be called to save the most recent rendered image.
...And 7 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the player, avatar, or camera; the origin of this space is used as the camera position for rendering the scene to be displayed to the user.
...this means that most frequently, you'll be using poses within your frame rendering code, which is executed as a callback from the xrframe method requestanimationframe().
...you can then apply controlpose's transform to the vertices in the object model representing the controller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer.
...And 6 more matches

Populating the page: how browsers work - Web Performance
web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate.
...this is why it's important for web performance optimization to include everything the browser needs to start rendering a page, or at least a template of the page - the css and html needed for the first render -- in the first 14 kilobytes.
... building the dom tree we describe five steps in the critical rendering path.
...And 6 more matches

Index - Game development
18 building up a basic demo with playcanvas 3d, animation, beginner, canvas, games, playcanvas, tutorial, webgl, camera, lighting, rendering of course, it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files.
... 19 building up a basic demo with playcanvas editor 3d, animation, beginner, canvas, games, lightning, online, playcanvas, tutorial, webgl, camera, editor, rendering now you can check the playcanvas engine article if you haven't seen it yet, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d games on the web page.
... 20 building up a basic demo with the playcanvas engine 3d, animation, beginner, canvas, games, playcanvas, tutorial, webgl, camera, engine, lighting, rendering now you can continue reading the playcanvas editor article, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d games on the web page.
...And 5 more matches

Basic usage of canvas - Web APIs
the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
... note: if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using css.
... the rendering context the <canvas> element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.
...And 5 more matches

WebGL best practices - Web APIs
take advantage of universally supported webgl 1 extensions these webgl 1 extensions are universally supported: angle_instanced_arrays ext_blend_minmax oes_element_index_uint oes_standard_derivatives oes_vertex_array_object webgl_debug_renderer_info webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low.
... flush when expecting results (like queries or rendering frame completion) flush tells the implementation to push all pending commands out for execution, flushing them out of the queue, instead of waiting for more commands to enqueue before sending for execution.
... consider rendering to a smaller backbuffer size a common (and easy) way to trade off quality for speed is rendering into a smaller backbuffer, and upscaling the result.
...And 5 more matches

Starting up and shutting down a WebXR session - Web APIs
begin the frame rendering cycle.
...onsessionend); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); // set up webgl data and such worlddata = loadglprograms(session, "worlddata.xml"); if (!worlddata) { return null; } // finish configuring webgl worlddata.session.updaterenderstate({ baselayer: new xrwebgllayer(worlddata.session, gl) }); // start rendering the scene referencespace = await worlddata.session.requestreferencespace("unbounded"); worlddata.referencespace = referencespace.getoffsetreferencespace( new xrrigidtransform(worlddata.playerspawnposition, worlddata.playerspawnorientation)); worlddata.animationframerequestid = worlddata.session.requestanimationframe(ondrawframe); return worlddata; } for the purposes of this ex...
...ample, an object named worlddata gets created to encapsulate data about the world and rendering environment.
...And 5 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
alignment-baseline baseline-shift clip clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap ...
... stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
... value: auto|srgb|linearrgb|<name>|<iri>|inherit; animatable: yes color-rendering it provides a hint to the browser about how to optimize its color interpolation and compositing operations.
...And 5 more matches

Understanding client-side JavaScript frameworks - Learn web development
react interactivity: editing, filtering, conditional rendering as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
...we'll look at conditional ui rendering along the way.
...ember interactivity: footer functionality, conditional rendering now it's time to start tackling the footer functionality in our app.
...And 4 more matches

Animated PNG graphics
information for each frame about placement and rendering is stored in 'fctl' chunks.
... 24 dispose_op byte type of frame area disposal to be done after rendering this frame.
... 25 blend_op byte type of frame area rendering for this frame.
...And 4 more matches

OfflineAudioContext - Web APIs
event handlers offlineaudiocontext.oncomplete is an eventhandler called when processing is terminated, that is when the complete event (of type offlineaudiocompletionevent) is raised, after the event-based version of offlineaudiocontext.startrendering() is used.
... offlineaudiocontext.startrendering() starts rendering the audio, taking into account the current connections and the current scheduled changes.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: complete fired when the rendering of an offline audio context is complete.
...And 4 more matches

OffscreenCanvas.getContext() - Web APIs
possible values are: "2d" creates a canvasrenderingcontext2d object representing a two-dimensional rendering context.
... "webgl" creates a webglrenderingcontext object representing a three-dimensional rendering context.
... "webgl2" creates a webgl2renderingcontext object representing a three-dimensional rendering context.
...And 4 more matches

Detect WebGL - Web APIs
« previousnext » this example demonstrates how to detect a webgl rendering context and reports the result to the user.
...to that end we will try to obtain the webgl rendering context from a canvas element.
... the webgl rendering context is an interface, through which you can set and query the state of the graphics machine, send data to the webgl, and execute draw commands.
...And 4 more matches

Inputs and input sources - Web APIs
this means that if you use a 3d model to represent your controller, your player's avatar's hands, or anything else representative of the controller's position in space, the gripspace can be used as the transform matrix that correctly positions and orients the object's model for rendering.
... to do this, it's necessary to use the transform to convert the grip space to the world coordinate system used by webgl for rendering purposes.
... presenting hand-held objects an input source's gripspace property identifies an xrspace describing the origin and orienation to use when rendering an object so that it appears to be held in the same hand as its input source.
...And 4 more matches

WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering 3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
...utput devices render a 3d scene to the device at an appropriate frame rate (optionally) mirror the output to a 2d display create vectors representing the movements of input controls at the most basic level, a scene is presented in 3d by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing.
... webglrenderingcontextbase.makexrcompatibile() configures the webgl context to be compatible with webxr.
...And 4 more matches

Performance fundamentals - Web Performance
html and css greatly increase productivity, sometimes at the expense of framerate or pixel-level control over rendering.
...this gives developers pixel-level control over rendering and precise control of framerate, but now the developers need to deal with multiple resolutions and orientations, right-to-left languages, and so forth.
... gecko rendering the gecko javascript engine supports just-in-time (jit) compilation.
...And 4 more matches

Mozilla Application Framework in Detail - Archive of obsolete content
where speed is the foremost consideration, we provide c++ libraries with multi-language interfaces for comprehensive, performant access to networking, filesystem, content, rendering, and much more.
... the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices.
...gecko consists roughly of an html parser and xml parser, a dom implementation, a css parser and style system, and the code for css-based and html-based layout and rendering.
...And 3 more matches

Square tilemaps implementation: Scrolling maps - Game development
rendering the map there are two main differences between rendering scrolling maps vs.
...in static maps, usually the rendering starts at the top left corner of a tile situated at the top left corner of a viewport.
... while rendering scrolling tilemaps, the first tile will often be clipped.
...And 3 more matches

Creating reftest-based unit tests
running ipc reftests reftests can also be run in a separate process, which can differ from same-process rendering in significant ways.
... testing invalidation testing that a document displays correctly once it has loaded is only one part of testing rendering.
...first you need to add class="reftest-wait" to the root element in the test to tell the reftest framework not to check the rendering as soon as the test finishes loading and moving on to the next test.
...And 3 more matches

nsIIOService
and for a css stylesheet it's the document whose rendering will be affected by the stylesheet.
...in that case the principal of the stylesheet which contains the import command is the triggeringprincipal, and the principal of the document whose rendering is affected is the loadingprincipal.
...and for a css stylesheet it's the document whose rendering will be affected by the stylesheet.
...And 3 more matches

Hit regions and accessibility - Web APIs
</canvas> tags can be used as a fallback for browsers which don't support canvas rendering.
... canvasrenderingcontext2d.addhitregion() adds a hit region to the canvas.
... canvasrenderingcontext2d.removehitregion() removes the hit region with the specified id from the canvas.
...And 3 more matches

Fundamentals of WebXR - Web APIs
this includes both managing the process of rendering the views needed to simulate the 3d experience and the ability to sense the movement of the headset or other motion sensing apparatus to provide the needed data to let you update the imagery shown to the user based on that movement.
... webxr is not a rendering technology, and provides no features for actually managing 3d data or rendering it to the display.
...for more details about this, see the optics of 3d in rendering and the webxr frame animation callback.
...And 3 more matches

XRView - Web APIs
usage notes positions and number of xrviews per frame while rendering a scene, the set of views that are used to render the scene for the viewer as of the current frame are obtained by calling the xrframe object's getviewerpose() method to get the xrviewerpose representing (in essence) the position of the viewer's head.
...in other words, don't assume there are exactly two views on a given viewer; there can be as few as one (such as when rendering the scene in inline mode, and potentially many (especially if the field of view is very large).
... the destination rendering layer to render a frame, you just iterate over the xrviewerpose's views, rendering each of them into the appropriate viewport within the frame's xrwebgllayer.
...And 3 more matches

Authoring MathML - MathML
hence you will need to use a mathml polyfill to provide some fallback rendering.
... { var div = document.createelement("div"), box; div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml support (gecko and webkit).
...for gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), this is much simpler and is compatible with any web rendering engine with mathml support.
...And 3 more matches

Progressive web app structure - Progressive web apps (PWAs)
architecture of an app there are two main, different approaches to rendering a website — on the server or on the client.
... server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
... client-side rendering (csr) allows the website to be updated in the browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning.
...And 3 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
architecture of an app there are two main, different approaches to rendering a website — on the server or on the client.
... server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
... client-side rendering (csr) allows the website to be updated in the browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning.
...And 3 more matches

SVG Attribute reference - SVG: Scalable Vector Graphics
accent-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stret...
...ch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickn...
...ess p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex ...
...And 3 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
the markup of both table and cell remains unchanged-- it's the rendering mode that's different.
...there's another obvious fix, which is to make sure your document doesn't trigger the "standards"rendering mode.
... of course, documents authored in xhtml strict or html strict will trigger the "standards" rendering mode, so we're going to go through two basic ways to address the problem in strict documents, and a number of ways to call on these "fixes." setting images to be blocks the first choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element.
...And 2 more matches

Tuning Pageload - Archive of obsolete content
the data flows in gecko as follows: network -> necko -> parser -> content sink -> content model -> rendering model -> layout -> painting.
... content.notify.* controls the information flow from content sink to rendering model.
... in particular, the way things work right now is that the parser and content sink construct the dom; then every so often, the content sink lets the rendering model constructor (nscssframeconstructor) know that there are new dom nodes.
...And 2 more matches

Mozilla release FAQ - Archive of obsolete content
gecko (formerly raptor) is the new html rendering engine in mozilla.
...it is more suitable for being embedded in other applications than the previous rendering engine.
... gemini was a previous rendering engine project, renamed nglayout aurora is the navigation center in mozilla and navigator5 seamonkey refers to versions of mozilla based on xpfe and nglayout normandy refers to the mail/news branch of mozilla what are all these acronyms people are using in the newsgroup?
...And 2 more matches

Drawing graphics - Learn web development
for example, if you were rendering a constantly updating graph of stock prices, the fallback content could be a static image of the latest stock graph, with alt text saying what the prices are in text.
...the ctx variable now contains a canvasrenderingcontext2d object, and all drawing operations on the canvas will involve manipulating this object.
... 2d canvas basics as we said above, all drawing operations are done by manipulating a canvasrenderingcontext2d object (in our case, ctx).
...And 2 more matches

Web performance resources - Learn web development
best practices start with learning the critical rendering path of the browser.
...as we learned in the critical rendering path document, linking css with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering.
... optimize the rendering of your page by removing blocking css.
...And 2 more matches

Fonts for Mozilla 2.0's MathML engine
in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering.
...in that case, you will see the correct rendering on these pages if you use gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) or greater.
...they are available under the sil open font license and should be installed for best mathml rendering.
...And 2 more matches

HTMLCanvasElement - Web APIs
the purpose of mozprintcallback is to obtain a higher resolution rendering of the canvas at the resolution of the printer being used.
...calling getcontext with "2d" returns a canvasrenderingcontext2d object, whereas calling it with "webgl" (or "experimental-webgl") returns a webglrenderingcontext object.
... webglcontextcreationerror fired if the user agent is unable to create a webglrenderingcontext or webgl2renderingcontext context.
...And 2 more matches

WebGL: 2D and 3D graphics for the web - Web APIs
webgl (web graphics library) is a javascript api for rendering high-performance interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
... the webgl 2 api introduces support for much of the opengl es 3.0 feature set; it's provided through the webgl2renderingcontext interface.
... reference standard interfaces webglrenderingcontext webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap oes...
...And 2 more matches

XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
if the scaling factor is greater than zero, then the frame buffer is smaller than the diplay's native dimensions, resulting in the output being up-scaled for display to the screen after rendering into the frame buffer.
... while rendering a frame for this scene, we get the viewport for the view and apply it to webgl, then render the scene.
...ns: function requestnativescalewebgllayer(gl, xrsession) { return gl.makexrcompatible().then(() => { let scalefactor = xrwebgllayer.getnativeframebufferscalefactor(xrsession); let gllayer = new xrwebgllayer(xrsession, gl, { framebufferscalefactor: scalefactor }); xrsession.updaterenderstate({ baselayer: gllayer }); }); }; this starts by calling the webgl rendering context function makexrcompatible().
...And 2 more matches

XRWebGLLayer - Web APIs
constructor new xrwebgllayer() creates and returns a new xrwebgllayer object for use by the specified xrsession, using a particular webglrenderingcontext or webgl2renderingcontext as the destination context.
...in this way, for example, the rendering of the left eye's point of view and of the right eye's point of view are each placed into the correct parts of the framebuffer.
... static methods getnativeframebufferscalefactor() returns the scaling factor that can be used to scale the resolution of the recommended webgl framebuffer resolution to the rendering device's native resolution.
...And 2 more matches

Web APIs
rule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto...
...database idbdatabaseexception idbdatabasesync idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmutablefile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversionchangeevent idbversionchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index inputdevicecapabilities inputevent installevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsy...
...rtptransceiverinit rtcsctptransport rtcsessiondescription rtcsessiondescriptioncallback rtcstats rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement sv...
...And 2 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
if the document is in strict rendering mode, it will parse the </script> inside the string as the closing tag for the enclosing <script>.
...mozilla will indicate the rendering mode in view -> page info (or ctrl+i) ; firefox will list the rendering mode in tools -> page info.
... standards mode standards mode is the strictest rendering mode -- it will render pages per the w3c html and css specifications and will not support any quirks.
...mozilla supports many of these in its quirks rendering mode.

The Business Benefits of Web Standards - Archive of obsolete content
such rendering differences do exist in older browsers, but most of them are well known and documented.
... in many cases, rendering differences are caused by ambiguous coding.
... well-formed code significantly reduces rendering differences in various browsers.
... standards embrace new browsers more and more browsers, other than internet explorer for windows, are used to surf the web: windows: msie, browsers using mozilla's gecko rendering engine, opera mac: ms-tasman (ie/mac's rendering engine), gecko-based browsers, safari, opera linux: gecko-based browsers, khtml-based browsers, opera overall, 5 different rendering engines are used to surf the web using dozens of browsers on 3 platforms.

Explaining basic 3D theory - Game development
rendering pipeline the rendering pipeline is the process by which images are prepared and output onto the screen.
... the graphics rendering pipeline takes the 3d objects built from primitives described using vertices, applies processing, calculates the fragments and renders them on the 2d screen as pixels.
... the last step is viewport transformation, which involves outputting everything for the next step in the rendering pipeline.
...applying textures onto objects during the fragment processing stage of the rendering pipeline allows us to adjust it by wrapping and filtering it if necessary.

Tiles and tilemaps overview - Game development
rendering static tilemaps is easy, and can be done with a nested loop iterating over columns and rows.
... here are examples showing how to translate from world coordinates to screen coordinates and back again: // these functions assume that the camera points to the top left corner function worldtoscreen(x, y) { return {x: x - camera.x, y: y - camera.y}; } function screentoworld(x,y) { return {x: x + camera.x, y: y + camera.y}; } rendering a trivial method for rendering would just be to iterate over all the tiles (like in static tilemaps) and draw them, substracting the camera coordinates (like in the worldtoscreen() example shown above) and letting the parts that fall outside the view window sit there, hidden.
...only tiles that are at visible should be rendered ideally — see the performance section for more ideas on improving rendering performance.
... one simple technique consists of pre-rendering the map in a canvas on its own (when using the canvas api) or on a texture (when using webgl), so tiles don't need to be re-drawn every frame and rendering can be done in just one blitting operation.

CSS performance optimization - Learn web development
browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the cssom trees.
...media queries are important for a responsive web design and help us optimize a critical rendering path.
... the browser blocks rendering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets.
...by separating out the css into multiple files, the main render-blocking file, in this case styles.css, is much smaller, reducing the time that rendering is blocked.

Getting started with Ember - Learn web development
examples include: prember: static website rendering for blogs or marketing content.
... fastboot: server-side rendering, including improving search-engine optimization (seo), or improving initial render performance of complex, highly interactive web pages.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Ember interactivity: Events, classes and state - Learn web development
replace the static component calls: <todo /> <todo /> with a dynamic #each block (which is basically syntactic sugar over the top of javascript's foreach()) that creates a <todo /> component for each todo available in the list of todos returned by the service’s all() getter: {{#each this.todos.all as |todo|}} <todo @todo={{todo}} /> {{/each}} another way to look at this: this — the rendering context / component instance.
...next we'll move on to getting our footer functionality working, including the todo counter, and look at conditional rendering, including correctly styling todos when they've been checked.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Framework main features - Learn web development
rendering elements just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications.
...both react and vue utilize a virtual dom model, but they do not apply the exact same logic when diffing or rendering.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Componentizing our React app - Learn web development
rendering with iteration to render our array of objects, we have to turn each one into a <todo /> component.
... unique keys now that react is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Mozilla’s UAAG evaluation report
does not contradict current specifications for html and css rendering.
...ensure user control of rendering.
...(p1) vg provides a focus outline box highlights follow graphical rendering conventions for windows does not highlight selected images we do not have the ability to show a border around the text selection we have the following focus appearance prefs that are not exposed in the ui, but can be manually inserted in the user's prefs.js file: setboolpref("browser.display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.f...
...(p1) vg uses title bar color and focus indicator to indicate with view port has focus the currently focused content frame has a dotted outline, until a key is pressed or scrolling occurs the focus appearance is not configurable 10.8 indicate rendering progress.

Fonts for Mozilla's MathML engine
fonts with appropriate unicode coverage and open font format features are required for good math rendering.
...note that most of these instructions may as well apply to other web rendering engines.
... note:cambria math is installed by default on windows 7 and later versions and should ensure relatively good mathml rendering.
... note: a deprecated version of stix is preinstalled starting with os x lion and should ensure relatively good mathml rendering.

Web Replay
graphics rendering is entirely local to the content process.
... instead of communicating via ipc with a compositor in the ui process, there is a compositor in the recording process itself which performs the rendering.
... webgl is not supported yet, as it uses a pretty different rendering path from normal web content.
... these operations may be property accesses, evals, or object calls, and an example is accessing the font property of a canvasrenderingcontext2d.

Using the Places history service
the places history service ("navhistory") implements these history interfaces: nsiglobalhistory2: basic add page, is visited functionality used by the docshell when visiting and rendering pages.
... nsiglobalhistory3: adds extra functions for dealing with redirects and hints for rendering (gecko flags).
... nsiglobalhistory3.setgeckoflags: called by gecko to store rendering information about a page.
... basic querying of the history system nsiglobalhistory2.isvisited: called by gecko when rendering links.

Optimizing canvas - Web APIs
« previousnext » the <canvas> element is one of the most widely used tools for rendering 2d graphics on the web.
... mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.getcontext('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values.
...this information can be used internally by the browser to optimize rendering.
... avoid text rendering whenever possible.

OES_texture_float - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts gl.float.
...if you set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use floating-point textures, the texture will be marked as incomplete.
... floating-point color buffers this extension implicitly enables the webgl_color_buffer_float extension (if supported), which allows rendering to 32-bit floating-point color buffers.

OES_texture_half_float - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts ext.half_float_oes.
...if you set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use half floating-point textures, the texture will be marked as incomplete.
... half floating-point color buffers this extension implicitly enables the ext_color_buffer_half_float extension (if supported), which allows rendering to 16-bit floating point formats.

Boilerplate 1 - Web APIs
boilerplate code for setting up webgl rendering context by now you are quite used to seeing the same pieces of html, css, and javascript repeated again and again.
... in following examples, we will use a javascript helper function, getrenderingcontext(), to initialize the webgl rendering context.
...basically, it gets the webgl rendering context from the canvas element, initializes the drawing buffer, clears it black, and returns the initialized context.
...]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; ...

Clearing by clicking - Web APIs
« previousnext » this example demonstrates how to combine user interaction with webgl graphics operations by clearing the rendering context with a random color when the user clicks.
... clearing the rendering context with random colors this example provides a simple illustration of how to combine webgl and user interaction.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.
... // if undefined, try to obtain the webglrenderingcontext.

WebGL by example - Web APIs
the examples are sorted according to topic and level of difficulty, covering the webgl rendering context, shader programming, textures, geometry, user interaction, and more.
... getting to know the rendering context detect webgl this example demonstrates how to detect a webgl rendering context and reports the result to the user.
... clearing with colors how to clear the rendering context with a solid color.
...clearing the rendering context with a random color when the user clicks.

Getting started with WebGL - Web APIs
next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an html canvas in browsers that support it without the use of plug-ins.
... preparing to render in 3d the first thing you need in order to use webgl for rendering is a canvas.
...its purpose is to set up the webgl context and start rendering content.
... once we have the canvas, we try to get a webglrenderingcontext for it by calling getcontext() and passing it the string "webgl".

WebGL model view projection - Web APIs
these matrices can be composed together and grouped in special ways to make them useful for rendering complicated 3d scenes.
... while rendering, we need to determine which polygons need to be rendered in order to represent the scene.
... perspective projection matrix up to this point, we've built up our own 3d rendering setup, step by step.
...this value should be kept reasonably close to the distance of the geometry in order to avoid precision errors creeping in while rendering.

Geometry and reference spaces in WebXR - Web APIs
at a fundamental level, rendering of scenes for webxr presentation in either augmented reality or virtual reality contexts is performed using webgl, so the two apis share much of the same design language.
... geometry operations with matrices we offer a guide to matrix mathematics as it pertains to 3d geometry, including how matrices are used for the three primary transforms that need to be performed when rendering 3d scenes: translation is the use of a matrix to shift the position of a point through the virtual space.
...the callback receives as one of its parameters a timestamp indicating the time at which the frame takes place, and should perform all rendering for the corresponding animation frame.
... you can learn more about the animation process in the article rendering and the webxr frame animation callback.

WebXR performance guide - Web APIs
rendering tips ...
... talk about general stuff like limiting how many different loops there are during rendering, avoiding unnecessary drawing, etc.
... can probably also include stuff from https://github.com/immersive-web/webxr/blob/master/explainer.md#changing-the-field-of-view-for-inline-sessions managing rendering quality ...
... this section will come in part from https://github.com/immersive-web/webxr/blob/master/explainer.md#controlling-rendering-quality managing frame rate ...

XRSession.updateRenderState() - Web APIs
the updaterenderstate() method of the xrsession interface of webxr api schedules changes to be applied to the active render state prior to rendering of the next frame.
... syntax xrsession.updaterenderstate(newstate) parameters newstate an object conforming to the xrrenderstateinit dictionary specifying the properties of the session's renderstate to update before rendering the next frame.
... depthfar optional a floating-point value specifying the distance in meters from the viewer to the far clip plane, which is a plane parallel to the display surface beyond which no further rendering will occur.
... all rendering will take place between the distances specified by depthnear and depthfar.

XRViewerPose - Web APIs
to render a scene using the xrviewerpose representing the user's head, one would iterate over the views in the views array, rendering them one after another.
... by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface.
... also, when rendering the scene for spectators or other players in a multiplayer game, the transform of the xrviewerpose can be used to determine both placement and facing direction of the other players in the game, so that they can be drawn in the correct place with the correct facing.
...if a valid pose is returned, the frame is rendered by clearing the backbuffer and then rendering each of the views in the pose; these are most likely the views for the left and right eyes.

XRWebGLLayer() - Web APIs
context a webglrenderingcontext or webgl2renderingcontext identifying the webgl drawing context to use for rendering the scene for the specified webxr session.
... antialias optional a boolean value which is true if anti-aliasing is to be used when rendering in the context; otherwise false.
...the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.
...any options specified in layerinit are used to tailor the rendering system's configuration.

The stacking context - CSS: Cascading Style Sheets
the stacking context in the previous part of this article, using z-index, the rendering order of certain elements is influenced by their z-index value.
...once stacking and rendering within div #3 is completed, the whole div #3 element is passed for stacking in the root element with respect to its sibling's div.
... an easy way to figure out the rendering order of stacked elements along the z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers.
...in our example (sorted according to the final rendering order): root div #2 - z-index is 2 div #3 - z-index is 4 div #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1 div #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3 div #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6 div #1 - z-index is 5 example html <div i...

Understanding CSS z-index - CSS: Cascading Style Sheets
in this case, there is a single rendering flow, and all elements are aware of the space taken by others.
... the z-index attribute lets you adjust the order of the layering of objects when rendering content.
... (from css 2.1 section 9.9.1 - layered presentation) this means that css style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0).
... the z position of each layer is expressed as an integer representing the stacking order for rendering.

CSS Houdini
houdini is a set of low-level apis that exposes parts of the css engine, giving developers the power to extend css by hooking into the styling and layout process of a browser’s rendering engine.
...houdini code doesn't wait for that first rendering cycle to be complete.
... css painting api reference css painting api guide worklets an api for running scripts in various stages of the rendering pipeline independent of the main javascript execution environment.
... worklets are conceptually similar to web workers, and are called by and extend the rendering engine.

Lazy loading - Web Performance
it's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
... one of the methods we can use to tackle this problem is to shorten the critical rendering path length by lazy loading resources that are not critical for the first render to happen.
...css must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering.
... fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering.

display - SVG: Scalable Vector Graphics
the display attribute lets you control the rendering of graphical or container elements.
... when the display attribute is set to none, then the given element does not become part of the rendering tree.
... the display attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements.
... this attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths.

externalResourcesRequired - SVG: Scalable Vector Graphics
the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element.
...in particular, if an element sets externalresourcesrequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.
...if an external resource is not available, progressive rendering is suspended, the document's svgload event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered.
...document rendering can proceed even if external resources are unavailable to the current element and its descendants.

2015 MDN Fellowship Program - Archive of obsolete content
github: brittanystoroz twitter: @brittanystoroz webgl brief project description webgl is the latest incarnation of the opengl family of real time rendering immediate mode graphics apis.
... github: nickdesaulniers twitter: @lostoracle web app performance brief project description web performance is a feature that needs to be considered from serving content to rendering to interactivity.
... finding and addressing performance bottlenecks depends on tooling the browser networking and rendering but also, often more important, user perception.

Building up a basic demo with Babylon.js - Game development
creating a rendering loop to make the scene actually visible we have to render it.
... geometry now the scene is properly rendering we can start adding 3d shapes to it.
...to show actual animation, we need to make changes to these values inside the rendering loop at the end of our code, so they are updated on every frame.

Finishing up - Game development
we could also improve our code rendering.
... rendering the lives display now you need to add a call to drawlives() inside the draw() function and add it below the drawscore() call.
... drawlives(); improving rendering with requestanimationframe() now let's work on something that is not connected to the game mechanics, but to the way it is being rendered.

Ember resources and troubleshooting - Learn web development
controllers are singletons, which may help manage the rendering context of the active route.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Routing in Ember - Learn web development
to adjust our old way of rendering the todolist app, we'll first need to replace the todolist component invocation from the application template with an {{outlet}} call, which means "any sub-route will be rendered in place here".
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Getting started with React - Learn web development
these components can be composed together to create a full ui, and react abstracts away much of the rendering work, leaving you to concentrate on the ui design.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React interactivity: Events and state - Learn web development
we'll look at conditional ui rendering along the way.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo...
... form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

React resources - Learn web development
until the arrival of hooks, es6 classes were the only way to bring state into components or manage rendering side effects.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Componentizing our Svelte app - Learn web development
conditionally rendering blocks of markup using the if block.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Deployment and next steps - Learn web development
related projects there are other projects related to svelte that are worth checking out: sapper: an application framework powered by svelte that provides server-side rendering (ssr), code splitting, file-based routing and offline support, and more.
... previous overview: client-side javascript frameworks in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Getting started with Svelte - Learn web development
moreover, with the help of sapper (a framework based on svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Using Vue computed properties - Learn web development
we do however have bigger fish to fry — in the next article we will look at conditional rendering, and how we can use it to show an edit form when we want to edit existing todo items.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo...
... form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Vue resources - Learn web development
nuxtjs — nuxtjs is a server-side vue framework, with some architectural opinions that can be useful to creating maintainable applications, even if you don’t use any of the server side rendering features it provides.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Gecko info for Windows accessibility vendors
definitions here are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applications.
... windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use.
... mfcembed testing client: this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine.

Gecko's "Almost Standards" Mode
as of mozilla 1.0.1 and 1.1 beta, there is a new rendering mode referred to as "almost standards" mode.
... "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them.
...this means that sliced-images-in-tables layouts are less likely to fall apart in gecko-based browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.

Mozilla MathML Status
altimg, altimg-width, altimg-height, altimg-valign, alttext accepted, but do not have any effect on the rendering.
... cdgroup accepted, but does not have any effect on the rendering.
... xref accepted, but does not have any effect on the rendering.

nsITaskbarPreviewController
method overview boolean drawpreview(in nsidomcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void onclick(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type description height unsigned long the height in pixels of the preview image.
... boolean drawpreview( in nsidomcanvasrenderingcontext2d ctx ); parameters ctx an nsidomcanvasrenderingcontext2d object representing the drawing context into which the preview is to be rendered.
... boolean drawthumbnail( in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height ); parameters ctx an nsidomcanvasrenderingcontext2d object representing the drawing context into which the thumbnail is to be rendered.

Animating CSS properties - Firefox Developer Tools
the css rendering waterfall the process the browser uses to update the page when a css property has changed can be described as a waterfall consisting of the following steps: recalculate style: every time a css property for an element changes, the browser must recalculate computed styles.
... css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint.
...if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall.

ANGLE_instanced_arrays - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... constants this extension exposes one new constant, which can be used in the gl.getvertexattrib() method: ext.vertex_attrib_array_divisor_angle returns a glint describing the frequency divisor used for instanced rendering when used in the gl.getvertexattrib() as the pname parameter.
... ext.vertexattribdivisorangle() modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().

CSS Painting API - Web APIs
paintrenderingcontext2d implements a subset of the canvasrenderingcontext2d api.
... it has an output bitmap that is the size of the object it is rendering to.
... dictionaries paintrenderingcontext2dsettings a dictionary providing a subset of canvasrenderingcontext2d settings.

Canvas API - Web APIs
the actual drawing is done using the canvasrenderingcontext2d interface.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
... specifications specification status comment html living standardthe definition of 'the 2d rendering context' in that specification.

EXT_color_buffer_float - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... color-renderable means: the webglrenderingcontext.renderbufferstorage() method now accepts these formats.
... examples gl must be a webgl2renderingcontext.

In depth: Microtasks and the JavaScript runtime environment - Web APIs
it then runs any pending javascript tasks, then any pending microtasks, then performs any needed rendering and painting before looping again to check for pending tasks.
...this is the main thread, and in addition to running your site's main code body, it handles receiving and dispatching user and other events, rendering and painting web content, and so forth.
...a well-designed web site or app uses workers to perform any complex or lengthy operations, leaving the main thread to do as little work as possible beyond updating, laying out, and rendering the web page.

OES_element_index_uint - Web APIs
the oes_element_index_uint extension is part of the webgl api and adds support for gl.unsigned_int types to webglrenderingcontext.drawelements().
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... extended methods this extension extends webglrenderingcontext.drawelements(): the type parameter now accepts gl.unsigned_int.

SVGColorProfileElement - Web APIs
svgcolorprofileelement.renderingintent an unsigned short corresponding to the rendering-intent attribute of the given element.
... it takes one of the rendering_intent_* constants defined on the svgrenderingintent interface that corresponds to the value of the rendering-intent attribute.
... methods this interface does not provide any specific methods, but implements those of its parent, svgelement, and implements methods of svgurireference and svgrenderingintent.

SVGSVGElement - Web APIs
this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.
...when the browser is actually rendering the content, then the position and size values represent the actual values when rendering.
... svgsvgelement.forceredraw() in rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.

WEBGL_depth_texture - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... extended methods this extension extends webglrenderingcontext.teximage2d(): the format and internalformat parameters now accept gl.depth_component and gl.depth_stencil.
... this extension extends webglrenderingcontext.framebuffertexture2d(): the attachment parameter now accepts gl.depth_stencil_attachment.

Clearing with colors - Web APIs
« previousnext » an example showing how to clear a webgl rendering context to a solid color.
...set up the rendering context and then just clear it solid green.
... var paragraph = document.queryselector("p"), canvas = document.queryselector("canvas"); // getting the webgl rendering context.

Adding 2D content to a WebGL context - Web APIs
« previousnext » once you've successfully created a webgl context, you can start rendering into it.
... drawing the scene the most important thing to understand before we get started is that even though we're only rendering a square plane object in this example, we're still drawing in 3d space.
... rendering the scene once the shaders are established, the locations are looked up, and the square plane's vertex positions put in a buffer, we can actually render the scene.

WebGL types - Web APIs
webgl 1 these types are used within a webglrenderingcontext.
...used for example in webglrenderingcontext.clear().
... webgl 2 these types are used within a webgl2renderingcontext.

Lighting a WebXR setting - Web APIs
because the webxr device api relies on other technologies—namely, webgl and frameworks based upon it—to perform all rendering, texturing, and lighting of a scene, the same general lighting concepts apply to webxr settings or scenes as to any other webgl-generated display.
...while sunlight does actually fall off in intensity with distance, the rate of change is very low and is only noticed over vast distances, so the rate of intensity change of sunlight doesn't typically matter for rendering a 3d scene.
...when performing real-time rendering—as is the case with any virtual or augmented reality application—spherical harmonic lighting is used to simplify and accelerate the process of generating highly realistic shadows and shading.

Worklet - Web APIs
the worklet interface is a lightweight version of web workers and gives developers access to low-level parts of the rendering pipeline.
... with worklets, you can run javascript and webassembly code to do graphics rendering or audio processing where high performance is required.
... css layout api for 3d rendering with webgl, you don't use worklets.

XRRenderState.baseLayer - Web APIs
syntax var xrwebgllayer = xrrenderstate.baselayer; value a xrwebgllayer object which is used as the source of the world's contents when rendering each frame of the scene.
... see the examples below to see how to use updaterenderstate() to set the current xrwebgllayer used for rendering the scene.
... examples you can set the xrwebgllayer used for rendering by calling updaterenderstate(), like this: let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); setnewwebgllayer(); function setnewwebgllayer(gl) { if (!gl) { /* webgl not available */ return; } xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl); }); }; here, the canvas obtained in the first line is the canvas into which webgl is going to draw.

XRRenderState - Web APIs
these properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the xrwebgllayer being used as the target for rendering the scene prior to it being presented on the xr device's display or displays.
...the far clip plane is the plane which is parallel to the display beyond which rendering of the scene no longer takes place.
...the near clip plane is the plane, parallel to the display, at which rendering of the scene begins.

XRRenderStateInit - Web APIs
the xrrenderstateinit dictionary is a writeable version of the xrrenderstate interface, and is used when calling an xrsession's updaterenderstate() method to apply changes to the render state prior to rendering the next frame.
... depthfar optional a floating-point value specifying the distance in meters from the viewer to the far clip plane, which is a plane parallel to the display surface beyond which no further rendering will occur.
... all rendering will take place between the distances specified by depthnear and depthfar.

XRWebGLLayerInit.antialias - Web APIs
the boolean antialias property, if present and set to true in the xrwebgllayerinit object provided as the xrwebgllayer() constructor's layerinit parameter, requests that the new webgl rendering layer support anti-aliasing.
... syntax let layerinit = { antialias: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { antialias: boolvalue }); value a boolean value which can be set to true to request anti-aliasing support in the new webgl rendering layer.
... example in this example, before creating a new xrwebgllayer to use for rendering, the value of a user preference from a configuration interface is obtained using a function called getpreferencevalue() to determine whether the user has enabled or disabled anti-aliasing support; this is passed into the constructor.

XRWebGLLayerInit.depth - Web APIs
when using the xrwebgllayer() constructor to create a new webgl rendering layer for webxr, providing as the layerinit parameter an object whose depth property is false will request that the new layer be created without a depth buffer.
...this means that the only source for depth information is the vertex coordinates, and reduces the accuracy and quality of rendering, but may potentially affect the performance of rendering as well.
... you can determine whether or not the depth buffer is being used by a given webgl rendering layer during your xr session by checking the value returned by xrwebgllayer.ignoredepthvalues.

XRWebGLLayerInit - Web APIs
antialias optional a boolean value which is true if anti-aliasing is to be used when rendering in the context; otherwise false.
...the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.
... examples given an xrsession, xrsession, and a webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position relative to the viewer.

box-decoration-break - CSS: Cascading Style Sheets
values slice the element is initially rendered as if its box were not fragmented, after which the rendering for this hypothetical box is sliced into pieces for each line/column/page.
...note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.
... block box fragments a block element with similar styles as above and no fragmentation results in: fragmenting the above block into three columns results in: note that stacking these pieces vertically will result in the non-fragmented rendering.

Event reference
events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
... complete the rendering of an offlineaudiocontext is terminated.
... the rendering of an offlineaudiocontext is terminated.

Overview of events and handlers - Developer guides
events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering.
...with the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger.
... the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the do...

HTML documentation index - HTML: Hypertext Markup Language
68 <bdo>: the bidirectional text override element bidi, bidirectional text, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, left to right, reference, right to left, text, text direction, text rendering, web, ltr, rtl the html bidirectional text override element (<bdo>) overrides the current directionality of text, so that the text within is rendered in a different direction.
...der attribute, html, link, link types, reference the prerender keyword for the rel attribute of the <link> element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.
... 235 preloading content with rel="preload" guide, html, javascript, link, media, performance, web performance, as, preload, rel the preload value of the <link> element's rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.

<mmultiscripts> - MathML
prescripts are optional and are separated by the empty tag <mprescripts/> (only one <mprescripts /> element is allowed, otherwise you will get an duplicatemprescripts error in the error console and "invalid-markup" in your rendering).
... examples using <mprescripts/> sample rendering: rendering in your browser: x d c b a <math> <mmultiscripts> <mi>x</mi> <!-- base expression --> <mi>d</mi> <!-- postsubscript --> <mi>c</mi> <!-- postsuperscript --> <mprescripts /> <mi>b</mi> <!-- presubscript --> <mi>a</mi> <!-- presuperscript --> </mmultiscripts> </math> using <none/> sample rend...
...ering: rendering in your browser: x c b <math> <mmultiscripts> <mi>x</mi> <!-- base expression --> <none /> <!-- postsubscript --> <mi>c</mi> <!-- postsuperscript --> <mprescripts /> <mi>b</mi> <!-- presubscript --> <none /> <!-- presuperscript --> </mmultiscripts> </math> specifications specification status comment mathml 3.0the definition of 'mmultiscripts' in that specification.

Animation performance and frame rate - Web Performance
the rendering waterfall the process a browser uses to paint changes to a page when an element is animating css properties can be described as a waterfall consisting of the following steps: recalculate style: when a property for an element changes, the browser must recalculate computed styles.
... css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint.
...if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall.

Web Performance
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.critical rendering paththe critical rendering path is the sequence of steps the browser goes through to convert the html, css, and javascript into pixels on the screen.
... optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout.css and javascript animation performancebrowsers are able to optimize rendering flows.
...it is a way of shorten the critical rendering path length, what would translate into improved page load times.

<altGlyph> - SVG: Scalable Vector Graphics
usage context categoriestext content element, text content child elementpermitted contentany elements or character data attributes x this attribute defines the corresponding absolute x-coordinates for rendering the element.
... value type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element.
...; animatable: no global attributes core attributes most notably: id lang styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xli...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> elements implementation status unknown basic data types and interfaces change ...
...implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path commands implementation status unknown z and z path commands to add path coordinate data to previous command implementation status unknown not render <path>, <pol...
...us unknown <audio> implementation status unknown <iframe> implementation status unknown <canvas> implementation status unknown <source> implementation status unknown <track> implementation status unknown painting change notes paint-order implemented (bug 828805) will-change instead of buffered-rendering implementation status unknown context-fill and context-stroke paint values implemented (bug 719286 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) and bug 798843 (firefox 26.0 / thunderbird 26.0 / seamonkey 2.23)) child keyword for <paint> values and marker properties implementation status unknown vector-effect property only none and non-scaling-stroke va...

CSS3 - Archive of obsolete content
css speech module candidate recommendation defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
... the image-rendering property that allow to define how resize of the object should be handled.

Index - Archive of obsolete content
work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate all rendering.
... 2245 xforms custom controls xforms you are in the right place if you would like to create your own custom renderings of the xforms controls like input, output, trigger, etc.

Documentation for BiDi Mozilla - Archive of obsolete content
details of rendering are dependent on user preferences and system capabilities.
... where the system is capable of tasks such as reversing and shaping text, symmetric swapping, numeric translation, etc., no special text rendering is needed, though there may be a call to a native api to set the base text direction (for example settextalign on windows).

FAQ - Archive of obsolete content
prism is built on top of the mozilla platform and its gecko rendering engine, just like mozilla firefox, so it provides the same capabilities to web applications that firefox provides, including support for html, javascript, css, and <canvas>.
...prism uses gecko, the same browser rendering system found in firefox.

The life of an HTML HTTP request - Archive of obsolete content
these get passed references to the presentation context and a rendering context to do the drawing on.
... the rendering context implementation is a native class (nsgtkrenderingcontext on unix) that knows how to draw in a window.

Building up a basic demo with the PlayCanvas engine - Game development
geometry now the scene is properly rendering we can start adding 3d shapes to it.
...to show actual animation, we need to make changes to these values inside the rendering loop, so they are updated on every frame.

Building up a basic demo with Three.js - Game development
rendering the scene everything is ready, but we still can't see anything.
... geometry now our scene is properly rendering, we can start adding 3d shapes.

Initialize the framework - Game development
the rendering method.
... the id of the <canvas> to use for rendering if one already exists on the page (we've specified null because we want phaser to create its own.) the names to use for phaser's three key functions that load and start the game, and update the game loop on every frame; we will use the same names to keep it clean.

Player paddle and controls - Game development
rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic.
... rendering the paddle, with physics next up, we will init our paddle by adding the following add.sprite() call inside the create() function — add it right at the bottom: paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle'); we can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.5 will be right in the middle of the...

2D maze game with device orientation - Game development
setting up the canvas we will be rendering our game on canvas, but we won't do it manually — this will be taken care of by the framework.
... var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also webgl and auto options available) and the optional id of the dom container we want to put the canvas in.

Gecko FAQ - Gecko Redirect 1
gecko also offers the ability to parse various document types (html, xml, svg, etc), advanced rendering capabilities including compositing and transformations, and support for embedded javascript and plugins.
... gecko includes the following components: document parser (handles html and xml) layout engine with content model style system (handles css, etc.) javascript runtime (spidermonkey) image library networking library (necko) platform-specific graphics rendering and widget sets for win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) original document information author(s): angus other contributors: ekrock, vidur, hidday, drunclear copyright information: portions of this content are �...

Canvas - MDN Web Docs Glossary: Definitions of Web-related terms
the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d shapes and bitmap images.
... learn more general knowledge canvas on wikipedia learning resources the canvas tutorial on mdn technical information the html <canvas> element on mdn the canvas general documentation on mdn canvasrenderingcontext2d: the canvas 2d drawing api the canvas 2d api specification ...

Houdini - MDN Web Docs Glossary: Definitions of Web-related terms
houdini is a set of low level apis that give developers the power to extend css, providing the ability to hook into the styling and layout process of a browser’s rendering engine.
...houdini code doesn't wait for that first rendering cycle to be complete.

OpenGL - MDN Web Docs Glossary: Definitions of Web-related terms
opengl (open graphics library) is a cross-language, multi-platform application programming interface (api) for rendering 2d and 3d vector graphics.
... the api is typically used to interact with a graphics processing unit (gpu), to achieve hardware-accelerated rendering.

Debugging CSS - Learn web development
this will help if you are seeing different rendering between multiple browsers.
...the html tree in your devtools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

Advanced form styling - Learn web development
this is because non-macos chrome browsers no longer use the webkit rendering engine, which enabled aqua appearance by default for certain form controls.
... for example, consider this simple test case: <span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with app...

HTML forms in legacy browsers - Learn web development
input { /* this rule turns off the default rendering for the input types that have a border, including buttons defined with an input element */ border: 1px solid #ccc; } input[type="button"] { /* this does not restore the default rendering */ border: none; } input[type="button"] { /* these don't either!
... actually there is no standard way to do it in any browser */ border: auto; border: initial; } input[type="button"] { /* this will come the closest to restoring default rendering, when supported.

CSS property compatibility table for form controls - Learn web development
rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors...
...there is no standard way to change the style of the range grip and opera has no way to tweak the default rendering of the range widget.

Styling web forms - Learn web development
on the left is the default rendering of an <input type="text">, <input type="date">, <select>, <textarea>, <input type="submit">, and a <button> in chrome on macos, with the platform's default font style in use.
...to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>.

Tips for authoring fast-loading HTML pages - Learn web development
too much time spent querying the last modified time of the referenced files can delay the initial display of the web page, since the browser must check the modification time for each of these files, before rendering the page.
... with that, the page can stop rendering while javascript is still loading.

Multimedia: Images - Learn web development
progressive jpegs, in contrast to normal jpegs, render progressively (hence the name), meaning the user sees a low-resolution version that gains clarity as the image downloads, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
... rendering strategy as images are loaded asynchronously and continue to load after the first paint, if their dimensions aren't defined before load, they can cause reflows to the page content.

Perceived performance - Learn web development
how fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders.
...even though the bytes might be the same, not blocking the page from rendering makes the load feel faster.

What is web performance? - Learn web development
the browser follows a well-defined set of steps, and optimizing the critical rendering path to prioritize the display of content that relates to the current user action will lead to significant improvements in content rendering time.
... see critical rendering path for more information.

Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Beginning our React todo list - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Starting our Svelte Todo list app - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

TypeScript support in Svelte - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Working with Svelte stores - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Getting started with Vue - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Adding a new todo form: Vue events, methods, and models - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Focus management with Vue refs - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

Styling Vue components with CSS - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component renderin...
...g a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...

A bird's-eye view of the Mozilla framework
when an html, xml, svg or other type of document is loaded, the nglayout engine (also known as gecko) parses the contents into a dom tree, and handles the layout and rendering of the document pages.
... the nglayout engine also parses xul ui controls into a dom tree and handles rendering of the ui.

What to do and what not to do in Bugzilla
a guide for confirming layout bugs (bugs in web page rendering) reporting new bugs you should report a bug in the new state after going through the triaging process as described in the two above-mentioned guides.
... mozilla applications like the application suite, thunderbird, or firefox share most of their program code and all of the backend code including things like network connectivity (ftp, http, imap) and html rendering.

Experimental features in Firefox
5 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
... webgpu api this new api provides low-level support for performing computation and graphics rendering using the graphics processing unit (gpu) of the user's device or computer.

MathML3Testsuite
note that in general, comparing with the "sample rendering" is not enough to conclude on the success/failure of the test.
... so please do not edit these pages if you are not able to explain gecko's rendering.

MathML Torture Test
it compares the rendering by the xetex engine using the default latin modern math font against the mathml rendering by your browser using the default math font, or an alternative opentype math fonts.
... to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher.

MathML Demo: <msqrt>, <mroot> - radicals
about all you can do with them is see how the rendering stretches them in various ways: horizontally sin ⁡ x ⁢ cos ⁡ y , vertically 1 2 3 4 and det ( 1 2 3 4 ) 2 , as well as 2 x ⁢ y ⁢ z ⁢ w , 2 1 2 3 4 , and 2 ⌈ det ( 1 2 3 4 ) ⌉ .
...about all you can do with them is see how the rendering stretches them in various ways: horizontally sin ⁡ x ⁢ cos ⁡ y vertically 1 2 3 4 and det ( 1 2 3 4 ) 2 as well as 2 x ⁢ y ⁢ z ⁢ w 2 1 2 3 4 and 2 ⌈ det ( 1 2 3 4 ) ⌉ the formula of binet shows how the n-th term in the fibonacci series can be expressed using roots f n = 1 5 [ ( 1 + 5 2 ) n - ( 1 - 5 2 ) n ] ...

Mozilla MathML Project
links installing fonts for mozilla's mathml engine mathml version 3.0 - w3c recommendation, 21 october 2010 w3c mathml test suite - designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner.
... mathml torture test - comparative testing of mathml rendering against tex.

Mozilla Web Developer FAQ
the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way.
... why isn’t mozilla rendering my page as i intended?

Profiling with the Firefox Profiler
expect rendering to happen at a significantly reduced frame rate when profiling this way, and keep the duration of the capture short, to ensure the samples of interest aren't overwritten.
...this can be very useful for debugging correctness problems such as a temporary visual/rendering glitch, because it allows you to find the precise composite that shows the glitch, and look at the layer tree for that composite.

AT APIs Support
accessible gecko gecko is a rendering engine that firefox, seamonkey, netscape and yelp use.
... on windows platform mfcembed testing client - this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine (please contact us for a copy).

Index
in fact, virtually all of the functionality that you associate with a browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces.
...to access the service, use: 469 nsidomcanvasrenderingcontext2d interfaces, interfaces:scriptable, xpcom interface reference the nsidomcanvasrenderingcontext2d interface implements the dom canvasrenderingcontext2d interface.

Working with ArrayBuffers
this example is based on the fact that the imagedata returned from canvasrenderingcontext2d.getimagedata is a uint8clampedarray view for an arraybuffer.
... the following codeblock provides a basic example of getting and setting uint8clampedarray and arraybuffer of imagedata: // context is a canvasrenderingcontext2d of some canvas var imagedata = context.getimagedata(x, y, w, h); var array = imagedata.data; // array is a uint8clampedarray var buffer = imagedata.data.buffer; // buffer is a arraybuffer // incomingbuffer is a typedarray var imagedata2 = context.createimagedata(w, h); imagedata2.data.set(incomingbuffer); further, if you have a byte array pixelbuffer, and you need to create imagedata from it.

Shader Editor - Firefox Developer Tools
webgl is a javascript api for rendering interactive 3d graphics and 2d graphics in the browser without using plugins.
... with webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.

Using the CSS Painting API - Web APIs
here we have provided one argument: the rendering context (we'll look at more in due course), often refered to by the variable name ctx.
... the 2d rendering context is a subset of the html5 canvas api; the version available to houdini (called the paintrenderingcontext2d) is a further subset containing most of the features available in the full canvas api with the exception of the canvasimagedata, canvasuserinterface, canvastext, and canvastextdrawingstyles apis.

Drawing text - Web APIs
drawing text the canvas rendering context provides two methods to render text: filltext(text, x, y [, maxwidth]) fills a given text at the given (x,y) position.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var text = ctx.measuretext('foo'); // textmetrics object text.width; // 16; } gecko-specific notes in gecko (the rendering engine of firefox, firefox os and other mozilla based applications), some prefixed apis were implemented in earlier versions to draw text on a canvas.

EXT_blend_minmax - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... constants this extension adds two new constants, which can be used in webglrenderingcontext.blendequation() and webglrenderingcontext.blendequationseparate(): ext.min_ext produces the minimum color components of the source and destination colors.

EXT_color_buffer_half_float - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... extended methods this extension extends webglrenderingcontext.renderbufferstorage(): the internalformat parameter now accepts ext.rgba16f_ext and ext.rgba16f_ext.

EXT_disjoint_timer_query - Web APIs
the ext_disjoint_timer_query extension is part of the webgl api and provides a way to measure the duration of a set of gl commands, without stalling the rendering pipeline.
... webgl extensions are available using the webglrenderingcontext.getextension() method.

EventTarget.addEventListener() - Web APIs
this prevents the event listener from being called, so it can't block page rendering while the user is scrolling.
...since it can't be canceled, event listeners can't block page rendering anyway.

OES_texture_float_linear - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... with the help of this extension, you can now set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use floating-point textures.

OES_texture_half_float_linear - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... with the help of this extension, you can now set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use half floating-point textures.

OVR_multiview2 - Web APIs
the ovr_multiview2 extension is part of the webgl api and adds support for rendering into multiple views simultaneously.
... for more information, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcontext.getextension() method.

OfflineAudioContext.resume() - Web APIs
if the context is not currently suspended or the rendering has not started, the promise is rejected with invalidstateerror.
... invalidstateerror if the context is not currently suspended or the rendering has not started.

Path2D - Web APIs
the path2d interface of the canvas 2d api is used to declare a path that can then be used on a canvasrenderingcontext2d object.
... the path methods of the canvasrenderingcontext2d interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.

SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering child text content.
... svgtextcontentelement.getnumberofchars() returns a long representing the total number of addressable characters available for rendering within the current element, regardless of whether they will be rendered.

WEBGL_color_buffer_float - Web APIs
webgl extensions are available using the webglrenderingcontext.getextension() method.
... extended methods this extension extends webglrenderingcontext.renderbufferstorage(): the internalformat parameter now accepts ext.rgba32f_ext and ext.rgb32f_ext ( ).

WEBGL_debug_renderer_info - Web APIs
the webglrenderingcontext.getparameter() method can help you to detect which features are supported and the failifmajorperformancecaveat context attribute lets you control if a context should be returned at all, if the performance would be dramatically slow.
... webgl extensions are available using the webglrenderingcontext.getextension() method.

WEBGL_lose_context - Web APIs
the webgl_lose_context extension is part of the webgl api and exposes functions to simulate losing and restoring a webglrenderingcontext.
... webgl extensions are available using the webglrenderingcontext.getextension() method.

WebGLActiveInfo - Web APIs
the webglactiveinfo interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.getactiveattrib() and webglrenderingcontext.getactiveuniform() methods.
... examples a webglactiveinfo object is returned by: webglrenderingcontext.getactiveattrib() webglrenderingcontext.getactiveuniform() or webgl2renderingcontext.gettransformfeedbackvarying() webglactiveinfo?

WebGLFramebuffer - Web APIs
the webglframebuffer interface is part of the webgl api and represents a collection of buffers that serve as a rendering destination.
...when working with webglframebuffer objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindframebuffer() webglrenderingcontext.createframebuffer() webglrenderingcontext.deleteframebuffer() webglrenderingcontext.isframebuffer() examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createframebuffer(); specifications specification status comment webgl 1.0the definition of 'webglframebuffer' in that specification.

WebGLRenderbuffer - Web APIs
the webglrenderbuffer interface is part of the webgl api and represents a buffer that can contain an image, or can be source or target of an rendering operation.
...when working with webglrenderbuffer objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindrenderbuffer() webglrenderingcontext.createrenderbuffer() webglrenderingcontext.deleterenderbuffer() webglrenderingcontext.isrenderbuffer() examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createrenderbuffer(); specifications specification status comment webgl 1.0the definition of 'webglrenderbuffer' in that specification.

WebGLShaderPrecisionFormat - Web APIs
the webglshaderprecisionformat interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.getshaderprecisionformat() method.
... examples a webglshaderprecisionformat object is returned by the webglrenderingcontext.getshaderprecisionformat() method.

WebGLTransformFeedback - Web APIs
it allows to preserve the post-transform rendering state of an object and resubmit this data multiple times.
... when working with webgltransformfeedback objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createtransformfeedback() webgl2renderingcontext.deletetransformfeedback() webgl2renderingcontext.istransformfeedback() webgl2renderingcontext.bindtransformfeedback() webgl2renderingcontext.begintransformfeedback() webgl2renderingcontext.endtransformfeedback() webgl2renderingcontext.pausetransformfeedback() webgl2renderingcontext.resumetransformfeedback() webgl2renderingcontext.transformfeedbackvaryings() webgl2renderingcontext.gettransformfeedbackvarying() examples creating a webgltransformfeedback object in this example, gl must be a webgl2renderingcontext.

A basic 2D WebGL animation example - Web APIs
let gl = null; let glcanvas = null; // aspect ratio and coordinate system // details let aspectratio; let currentrotation = [0, 1]; let currentscale = [1.0, 1.0]; // vertex information let vertexarray; let vertexbuffer; let vertexnumcomponents; let vertexcount; // rendering data shared with the // scalers.
... finally, animatescene() is called to render the first frame and schedule the rendering of the next frame of the animation.

Hello GLSL - Web APIs
0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compile...
... gl.drawarrays(gl.points, 0, 1); cleanup(); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; ...

Hello vertex attributes - Web APIs
ize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compile...
...gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; ...

Raining rectangles - Web APIs
border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.sc...
...ms[0], 5 + 120 * randnums[1] ]; rect.position = [ randnums[2]*(gl.drawingbufferwidth - rect.size[0]), gl.drawingbufferheight ]; rect.velocity = 1.0 + 6.0*math.random(); rect.color = getrandomvector(); gl.clearcolor(rect.color[0], rect.color[1], rect.color[2], 1.0); function getrandomvector() { return [math.random(), math.random(), math.random()]; } } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; ...

Scissor animation - Web APIs
var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [ math.random()*(gl.drawingbufferwidth - size[0]), gl.drawingbufferheight ]; // random velocity between 1.0 and 7.0 velocity = 1.0 + 6.0*math.random(); color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; ...

Textures from code - Web APIs
d - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compile...
...zeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0, 0.0]), gl.static_draw); gl.vertexattribpointer(0, 2, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; ...

Using WebGL extensions - Web APIs
var available_extensions = gl.getsupportedextensions(); the webglrenderingcontext.getsupportedextensions() method returns an array of strings, one for each supported extension.
...xture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context enabling an extension before an extension can be used it has to be enabled using webglrenderingcontext.getextension().

WebXR application life cycle - Web APIs
this will involve managing inputs, animations, and rendering.
...this will reduce the chance that the rendering process will noticeably stall the app.

Web Audio API - Web APIs
offline/background audio processing it is possible to process/render an audio graph very quickly in the background — rendering it to an audiobuffer rather than to the device's speakers — with the following.
... complete (event) the complete event is fired when the rendering of an offlineaudiocontext is terminated.

XRInputSource.gripSpace - Web APIs
syntax var xrspace = xrinputsource.gripspace; value an xrspace object representing the position and orientation of the input device in virtual space, suitable for rendering an image of the device into the scene.
... examples in tis example, taken from the frame rendering callback, the gripspace is used to render a mesh that represents the position and orieintation of the controller in the virtual environment.

XRSession.requestAnimationFrame() - Web APIs
to prevent two loops from // rendering in parallel, skip drawing in this one until the session ends.
...window.requestanimationframe(onwindowanimationframe) function onxranimationframe(time, xrframe) { xrsession.requestanimationframe(onxranimationframe) renderframe(time, xrframe) } function renderframe(time, xrframe) { // shared rendering logic.

XRSession - Web APIs
cancelanimationframe() removes a callback from the animation frame painting callback from xrsession's set of animation frame rendering callbacks, given the identifying handle returned by a previous call to requestanimationframe().
... requestanimationframe() schedules the specified method to be called the next time the user agent is working on rendering an animation frame for the webxr device.

XRView.transform - Web APIs
in this example, we see an outline of a code fragment used while rendering an xrframe, which makes use of the view transform to place objects in the world during rendering.
...ayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); for (let obj of world.objects) { mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, obj.matrix); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); obj.render(modelviewmatrix, normalmatrix); } } two matrices are created outside the rendering loop; this avoids repeatedly allocating and deallocating the matrices, and generally reduces overhead by reusing the same matrix for each object rendered.

XRWebGLLayer.antialias - Web APIs
the read-only xrwebgllayer property antialias is a boolean value which is true if the rendering layer's frame buffer supports antialiasing.
... syntax let antialiasingsupported = xrwebgllayer.antialias; value a boolean value which is true if the webgl rendering layer's frame buffer is configured to support antialiasing.

XRWebGLLayer.ignoreDepthValues - Web APIs
the read-only xrwebgllayer property ignoredepthvalues is a boolean value which is true if the session has been configured to ignore the values in the depth buffer while rendering the scene.
... examples if the web application which is using wexr is rendering its content without using a depth buffer—or if the depth buffer's contents are invalid—you should disable the use of the depth buffer for webxr rendering by setting ignoredepthvalues to true when creating the xrwebgllayer.

XRWebGLLayerInit.framebufferScaleFactor - Web APIs
the xrwebgllayerinit dictionary's framebufferscalefactor property, when specified upon instantiating a new xrwebgllayer using its constructor, xrwebgllayer(), specifies the scaling factor to use when determining the size of the frame buffer to use when rendering the scene, relative to the default xr device display resolution.
...see managing rendering quality in webxr performance guide for more information.

XRWebGLLayerInit.ignoreDepthValues - Web APIs
syntax let layerinit = { ignoredepthvalues: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { ignoredepthvalues: boolvalue }); value a boolean value which can be set to true to disable the use of the depth buffer by the webgl rendering layer created by the xrwebgllayer() constructor.
... usage notes if ignoredepthvalues is true, the webxr compositor will ignore the contents of the depth buffer, if it exists, while compositing and rendering the scene.

XRWebGLLayerInit.stencil - Web APIs
when using the xrwebgllayer() constructor to create a new webgl rendering layer for webxr, providing as the layerinit parameter an object whose stencil property is false requests that the new layer be created without a stencil buffer.
...also just like the depth buffer, the value of an enter in the stencil buffer directly affects how (or if) the corresponding pixel is drawn during rendering.

@media - CSS: Cascading Style Sheets
device-height height of the rendering surface of the output device deprecated in media queries level 4.
... device-width width of the rendering surface of the output device deprecated in media queries level 4.

CSS Images - CSS: Cascading Style Sheets
reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these.
... specifications specification status comment css images module level 4 working draft added image-resolution, conic-gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css gradients' in that specification.

Using z-index - CSS: Cascading Style Sheets
layer -3 layer -2 layer -1 layer 0 (default rendering layer) layer 1 layer 2 layer 3 ...
... top layer (closest to the observer) notes: when no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).

Using media queries - CSS: Cascading Style Sheets
device-height height of the rendering surface of the output device deprecated in media queries level 4.
... device-width width of the rendering surface of the output device deprecated in media queries level 4.

CSS reference - CSS: Cascading Style Sheets
ercentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():lin...
...()system (@counter-style)ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@...

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
note: the screenshots below show the expected rendering.
... automatic sizing using "auto" for both dimensions if background-size is set to auto or auto auto, rule 2 says that rendering must preserve any intrinsic ratio that's provided.

background-size - CSS: Cascading Style Sheets
rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the css3 background-size specification and with the css3 image values gradient specification.
...d-image: linear-gradient(blue, red); /* not safe to use */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* safe to use */ background-size: 25px 50px; background-size: 50% 50%; } note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of firefox prior to 8, and in browsers not implementing firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

border-collapse - CSS: Cascading Style Sheets
values collapse adjacent cells have shared borders (the collapsed-border table rendering model).
... separate adjacent cells have distinct borders (the separated-border table rendering model).

filter - CSS: Cascading Style Sheets
filters are commonly used to adjust the rendering of images, backgrounds, and borders.
...7, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } combining functions you may combine any number of functions to manipulate the rendering.

font-smooth - CSS: Cascading Style Sheets
switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
...switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.

HTML5 - Developer guides
improvement in <iframe> using the sandbox and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.
... requestanimationframe allows control of animations rendering to obtain optimal performance.

The Unicode Bidirectional Text Algorithm - Developer guides
the unicode® bidirectional algorithm (also known as the bidi algorithm) is part of the unicode text standard that describes how the user agent should order characters while rendering unicode text.
... in this guide, we'll take a look at the bidi algorithm and learn in general what it does and how it applies to your content, so that you'll be better prepared when using the features of html and css to which the algorithm applies while determining the order and directionality of text during rendering.

<img>: The Image Embed element - HTML: Hypertext Markup Language
image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called.
...setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from rendering.

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
by convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the html standard.
... result the output looks like this without a style sheet applied: with custom styles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be presented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p> result the result is just what we want!

<link>: The External Resource Link element - HTML: Hypertext Markup Language
for example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site.
... target defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.

Preloading content with rel="preload" - HTML: Hypertext Markup Language
the preload value of the <link> element's rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
...s and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on.

Firefox user agent string reference - HTTP
focus version (rendering engine) user agent string 1.0 (webview mobile) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/1.0 chrome/59.0.3029.83 mobile safari/537.36 1.0 (webview tablet) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/1.0 chrome/59.0.3029.83 safari/537.36 6.0 (geckoview) mozilla/5.0 (...
... klar version (rendering engine) user agent string 1.0 (webview) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 klar/1.0 chrome/58.0.3029.83 mobile safari/537.36 4.1+ (webview) mozilla/5.0 (linux; android 7.0) applewebkit/537.36 (khtml, like gecko) version/4.0 focus/4.1 chrome/62.0.3029.83 mobile safari/537.36 6.0+ (geckoview) mozilla/5.0 (android 7.0; mobile; rv:62.0) gecko/62.0 firefox/62.0 focus for ios version 7 of focus for ios uses a user agent string with the following fo...

Progressive loading - Progressive web apps (PWAs)
to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure.
... loading on demand the image loading mechanism discussed in the above section works ok — it loads the images after rendering the html structure, and applies a nice transition effect in the process.

requiredFeatures - SVG: Scalable Vector Graphics
http://www.w3.org/tr/svg11/feature#basictext the browser supports the <text> element http://www.w3.org/tr/svg11/feature#paintattribute the browser supports the color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-interpolation and color-rendering attributes http://www.w3.org/tr/svg11/feature#basicpaintattribute the browser supports the color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width and color-rendering attributes http://www.w3.org/tr/svg11/feature#opacityattribute the browser supports the opacity, stroke-opacity and fill-opacity attributes ...
... http://www.w3.org/tr/svg11/feature#graphicsattribute the browser supports the display, image-rendering, pointer-events, shape-rendering, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphicsattribute the browser supports the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/feature#gradient the browser supports the <lineargradient>, <radialgradient> and <stop> elements http://www.w3.org/tr/svg11/feature#pattern the browser supports the <pattern> element http://www.w3.org/tr/svg11/feature#clip the browser supports the <clippath> element...

stroke-dashoffset - SVG: Scalable Vector Graphics
the stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.
..."30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array computation is pushed by 3 user units --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value ...

<circle> - SVG: Scalable Vector Graphics
a value lower or equal to zero disables rendering of the circle.
... global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, ar...

<clipPath> - SVG: Scalable Vector Graphics
thus, it affects the rendering of an element, but not the element's inherent geometry.
...pe: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<text>, <use> specifications specification status comment ...

Getting started - SVG: Scalable Vector Graphics
(firefox users: click here) the rendering process involves the following: we start with the <svg> root element: a doctype declaration as known from (x)html should be left off because dtd based svg validation leads to more problems than it solves before svg 2, to identify the version of the svg for other types of validation the version and baseprofile attributes should always be used instead.
... basic properties of svg files the first important thing to notice is the order of rendering elements.

SVG fonts - SVG: Scalable Vector Graphics
since accessing the correct font file is however crucial for rendering text correctly, a font description technology was added to svg to provide this ability.
...all following attributes are rendering instructions for the font layout engine, for example, how much of the glyphs' overall heights are ascenders.

WebAssembly Concepts - WebAssembly
this article explains the concepts behind how webassembly works including its goals, the problems it solves, and how it runs inside the web browser's rendering engine.
...if the application uses opengl, the html also contains a <canvas> element that is used as the rendering target.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
chrome://testapp/locale/testapp.dtd"> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="&button.1.label;"/> <button label="&button.2.label;"/> </window> listing 26: reading in external entities <!entity button.1.label "firefox"> <!entity button.2.label "thunderbird"> listing 27: testapp.dtd substituting css for attribute declarations the gecko rendering engine includes a number of css properties with -moz- prepended to them; these are custom properties for xul that have been implemented prior to being a w3c recommendation.

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
the gecko rendering engine handles nearly all of css level 2 and some of css level 3.

Introduction - Archive of obsolete content
xulrunner xulrunner includes the gecko rendering engine, the necko networking library, and several other components that provide os-independent file management, accessibility, and localization, among others.

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
i ran into a steep learning curve, not with the web standards themselves, but with the quirky rendering behaviors and inconsistencies in various browsers.

Adding the structure - Archive of obsolete content
all xul elements can be given custom attributes in addition to the ones the xul rendering engine recognizes which get ignored by the engine, so adding this custom attribute does not create any problems or modify the way the widget is displayed (except for the ways we explicitly specify with css).

Making it into a static overlay - Archive of obsolete content
when navigator.xul is rendering into the browser's application interface, this causes any attributes or child elements of the statusbar element in the overlay file to be added to the interface's dom and thus show up in the interface as if they were defined on the same element in navigator.xul.

Layout System Overview - Archive of obsolete content
the idea of formatting text and graphics to fit within a given screen area sounds simple, but the interaction of in-flow and out-of-flow elements, the considerations of incremental page rendering, and the performance concerns of dynamic content changes makes for a system that has a lot of work to do, and a lot of data to manage.

Mozilla Application Framework - Archive of obsolete content
gecko a performant web content rendering/editing engine with world-leading support for standards that you can drop into your application with a single line of xul.

When To Use ifdefs - Archive of obsolete content
for instance, it is possible to disable most of the xul rendering engine by specifying --disable-xul when configuring the build.

SVG And Canvas In Mozilla - Archive of obsolete content
work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate all rendering.

XTech 2005 Presentations - Archive of obsolete content
work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate all rendering.

A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.

treeBoxObject - Archive of obsolete content
« xul reference treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the window.

The Joy of XUL - Archive of obsolete content
separation of presentation from logic makes applications resilient to change.the original ui implementation made extensive use of graphics for rendering the month and week views.

Skinning XUL Files by Hand - Archive of obsolete content
instead, a css file is usually simply a list of style definitions that are applied to their respective elements and classes by the rendering engine.

XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the form of html source and transforms it into a document tree.

XUL Questions and Answers - Archive of obsolete content
with mozilla trunk --------------------------------------------------------- nsidomcanvasrenderingcontext2d* c2d = //coming from <canvas> nsidomwindow* window = //coming from <iframe> c2d->drawwindow( window, ..., "rgba(0,0,0,0)"); --------------------------------------------------------- this makes canvas background transparent if background is transparent but when "window" is coming from top level content window, background is not transparent.

XML - Archive of obsolete content
gecko is a rendering engine that understands xul and knows how to make it into pixels on the screen.

tree - Archive of obsolete content
treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the window.

XULRunner Hall of Fame - Archive of obsolete content
github bluegriffon the next-generation web editor based on the rendering engine of firefox.

What XULRunner Provides - Archive of obsolete content
the following features are either already implemented or planned: gecko features xpcom networking gecko rendering engine dom editing and transaction support (no ui) cryptography xbl (xbl2 planned) xul svg xslt xml extras (xmlhttprequest, domparser, etc.) web services (soap) auto-update support (not yet complete) type ahead find toolbar history implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xulrunne...

Gecko Compatibility Handbook - Archive of obsolete content
verify that all hyperlinks use forward slashes (/) clicking on a link displays a "download" or displays html code instead of rendering the page correctly, but works as expected in internet explorer the web server has incorrectly specified the mime type for the content.

2006-10-13 - Archive of obsolete content
firefox browser problem: width:30ex does not respect font discussion about a font rendering problem with firefox print on the firefox context menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix.

2006-11-24 - Archive of obsolete content
gecko 1.9 intl rendering peformance november 20th: boris zbarskyannounced that: we need to create an intl performance page set or multiple intl performance page sets and run at least the pageload tests for all of these pagesets, and preferably also some sort of dhtml tests using pages of the different types.

2006-11-24 - Archive of obsolete content
announcments bon echo status mike beltzner posted a small to-do list with regards to bon echo firefox 1.5.0.9/2.0.0.1 jay patel posted an update of bugs for the firefox 1.5.0.9/2.0.0.1 releases discussion non-ascii rendering performance boris zbarsky made some suggestions on how to improve international font rendering cvs commit access changes a large discussion went on about changes to policies surrounding cvs commit access project drivers and technical oversight mike connor suggested ways to better organize project management, policy making, and technical oversight.

Proposal - Archive of obsolete content
and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook.

Vulnerabilities - Archive of obsolete content
one of the trust assumptions in the design of the html content rendering feature was that users would not receive malicious hyperlinks and click on them.

Browser Detection and Cross Browser Support - Archive of obsolete content
gecko and navigator 4 gecko is the replacement for navigator 4 rendering engine and as such retains many features from navigator 4.

XForms Custom Controls - Archive of obsolete content
purpose you are in the right place if you would like to create your own custom renderings of the xforms controls like input, output, trigger, etc.

XForms Group Element - Archive of obsolete content
if a group is non-relevant, then the rendering approach used to signify non-relevance is applied to the entire content of the group.

Mozilla XForms User Interface - Archive of obsolete content
we use the data type of the instance node that the form control is bound to as a clue when making a rendering decision.

Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and captions except for family.

Anatomy of a video game - Game development
each of these methods have similar tradeoffs: users can skip rendering frames or interpolate extra ones depending on their performance.

Examples - Game development
animation physics 3d rendering of terrain and cars, using ammo.js for the physics calculations.

Game distribution - Game development
the distributions are packaged with the webkit engine to provide rendering on any platform.

Bounding volume collision detection with THREE.js - Game development
we can easily debug collisions by rendering the meshes that boxhelper creates.

GLSL Shaders - Game development
fragment shaders compute the renderings of a shape's colors and other attributes.

3D games on the Web - Game development
they can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms shape positions to real 3d drawing coordinates, while the latter computes rendering colors and other attributes.

Efficient animation for web games - Game development
requestanimationframe includes a domhighrestimestamp in its callback function prototype, which you definitely should use (as opposed to using the date object), as this will be the time the frame began rendering, and ought to make your animations look more fluid.

Square tilemaps implementation: Static maps - Game development
iles 64 x 64 pixels in size: var map = { cols: 8, rows: 8, tsize: 64, tiles: [ 1, 3, 3, 3, 1, 1, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1 ], gettile: function(col, row) { return this.tiles[row * map.cols + col] } }; rendering the map we can render the map by iterating over its columns and rows.

Create the Canvas and draw on it - Game development
then we're creating the ctx variable to store the 2d rendering context — the actual tool we can use to paint on the canvas.

2D breakout game using pure JavaScript - Game development
you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.

Build the brick field - Game development
rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function preload() { // ...

2D breakout game using Phaser - Game development
you will learn the basics of using the phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states.

Tutorials - Game development
along the way you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.

Blink - MDN Web Docs Glossary: Definitions of Web-related terms
specifically, blink began as a fork of the webcore library in webkit, which handles layout, rendering, and dom, but now stands on its own as a separate rendering engine.

CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website.

Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

Firefox OS - MDN Web Docs Glossary: Definitions of Web-related terms
firefox os is mozilla's mobile operating system, based on linux and firefox's powerful gecko rendering engine.

First paint - MDN Web Docs Glossary: Definitions of Web-related terms
first paint, part of the paint timing api, is the time between navigation and when the browser renders the first pixels to the screen, rendering anything that is visually different from what was on the screen prior to navigation.

Jank - MDN Web Docs Glossary: Definitions of Web-related terms
jank refers to sluggishness in a user interface, usually caused by executing long tasks on the main thread, blocking rendering, or expending too much processor power on background processes.

Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine.

Media - MDN Web Docs Glossary: Definitions of Web-related terms
media (css) in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine.

Parse - MDN Web Docs Glossary: Definitions of Web-related terms
parsing can continue when a css file is encountered, but <script> tags—particularly those without an async or defer attribute—blocks rendering, and pauses parsing of html.

Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
if no other styles are applied to content, the user agent origin's styles are used while rendering elements.

Texel - MDN Web Docs Glossary: Definitions of Web-related terms
the process of mapping the appropriate texel’s to their corresponding points on a polygon is called texture mapping, which is a stage of the process of rendering a 3d image for display.

WebGL - MDN Web Docs Glossary: Definitions of Web-related terms
you can invoke webgl within the html <canvas> element, which provides a rendering surface.

WebKit - MDN Web Docs Glossary: Definitions of Web-related terms
however, two important components fall under the lgpl: the webcore rendering library and the javascriptcore engine.

Prerender - MDN Web Docs Glossary: Definitions of Web-related terms
with prerendering, the content is prefetched and then rendered in the background by the browser as if the content had been rendered into an invisible separate tab.

MDN Web Docs Glossary: Definitions of Web-related terms
ass pseudo-element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive request header resource timing response header responsive web design rest rgb ril robots.txt round trip time (rtt) routers rss rtcp (rtp control protocol) rtf rtl (right to left) rtp (real-time transport protocol) ...

How CSS is structured - Learn web development
p { color: red; } p { color: blue; } however, in the case of our earlier example with the conflict between the class selector and the element selector, the class prevails, rendering red paragraph text.

CSS FAQ - Learn web development
modern browsers have two main rendering modes: quirks mode: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers.

Fundamental text and font styling - Learn web development
text-rendering: try to perform some text rendering optimization.

Other form controls - Learn web development
controlling multi-line rendering <textarea> accepts three attributes to control its rendering across several lines: cols specifies the visible width (columns) of the text control, measured in average character widths.

Sending form data - Learn web development
this uses the flask framework for rendering the templates, handling the form data submission, etc.

Installing basic software - Learn web development
office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers.

Debugging HTML - Learn web development
looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.

Getting started with HTML - Learn web development
these two code snippets are equivalent: <p>dogs are silly.</p> <p>dogs are silly.</p> no matter how much whitespace you use inside html element content (which can include one or more space character, but also line breaks), the html parser reduces each sequence of whitespace to a single space when rendering the code.

What’s in the head? Metadata in HTML - Learn web development
for example, your page could handle english and japanese just fine: if you set your character encoding to iso-8859-1, for example (the character set for the latin alphabet), your page rendering may appear all messed up: note: some browsers (e.g.

General asynchronous programming concepts - Learn web development
we block user interactivity with the rendering of the ui.

Introducing asynchronous JavaScript - Learn web development
while each operation is being processed, nothing else can happen — rendering is paused.

Introduction to web APIs - Learn web development
its context object is created by getting a reference to the <canvas> element you want to draw on, and then calling its htmlcanvaselement.getcontext() method: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); anything that we want to do to the canvas is then achieved by calling properties and methods of the context object (which is an instance of canvasrenderingcontext2d), for example: ball.prototype.draw = function() { ctx.beginpath(); ctx.fillstyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); }; note: you can see this code in action in our bouncing balls demo (see it running live also).

What is JavaScript? - Learn web development
scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading.

The "why" of web performance - Learn web development
while an individual's perception of site performance performance is subjective, loading and rendering can be measured.

Web performance - Learn web development
this article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance, how do users perceive performance?

Introduction to the server side - Learn web development
it is also possible to simply return data (json, xml, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent).

Server-side web frameworks - Learn web development
#best/views.py from django.shortcuts import render from .models import team def youngest(request): list_teams = team.objects.filter(team_level__exact="u09") context = {'youngest_teams': list_teams} return render(request, 'best/index.html', context) rendering data web frameworks often provide templating systems.

Introduction to cross browser testing - Learn web development
the site should work entirely in the last few versions of the most popular desktop and mobile (ios, android, windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari.

Android-specific test suites
local unit tests are the fastest to develop and execute, but they can only test java code; there's no connection to the gecko rendering engine.

Debugging Table Reflow
the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1...

The Firefox codebase: CSS Guidelines
consider using an actual <img> tag (for html documents) or list-style-image (for xul documents) if rendering the image is important.

Interface Compatibility
canvasrenderingcontext.mozdrawtext).

SVG Guidelines
authoring guidelines a lot of svg files (particularly those generated by svg editors) ship without being cleaned up and can contain a ton of junk that bloats the file size and slows down rendering.

Performance best practices for Firefox front-end engineers
the rendering process goes through the following steps: the above image is used under creative commons attribution 3.0, courtesy of this page from our friends at google, which itself is well worth the read.

Roll your own browser: An embedding how-to
browserg!: a java application that uses webclient for html rendering and surfing capabilities.

Embedding Mozilla
documentation gecko embedding basics an introduction to embedding the gecko rendering engine.

Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame v...

Updates
better rendering of mathematical symbols, especially stretchy operators.

MathML Demo: <mfrac> - fractions
inline, styles auto, display and text 1 2 - 1 2 + 1.23456 7890 , the rendering should be script-size, normal-size and script-size in this example.

MathML Demo: <mtable> - tables and matrices
anyway, this is buggy in mozilla because what you see above is a fallback to the rendering code used for the baseline case (see below).

Mozilla projects on GitHub
servo the next-generation rendering engine.

Mozilla Quirks Mode Behavior
i don't follow the code in nscssrenderingborders well enough to tell, though.] in quirks mode a fixed width specified on a table cell resets the nowrap attribute.

Mozilla Style System
the style context has a getter for each struct, and nsiframe, which represents the concept of a css box (or rendering object), also has getters that forward to the frame's style context.

Hacking Tips
break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_...

Using XPCOM Components
in fact, virtually all of the functionality that you associate with a browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces.

imgIContainer
image/public/imgicontainer.idlscriptable represents an image in the gecko rendering engine.

imgIEncoder
dispose=[none|background|previous] -- default: "none" what to do with the image's canvas before rendering the next frame.

nsIContentViewer
void setnavigationtiming(in nsdomnavigationtimingptr atiming); void setpagemode(in boolean apagemode, in nsiprintsettings aprintsettings); void show(); void stop(); void unload(); obsolete since gecko 1.8 attributes attribute type description container nsisupports domdocument nsidomdocument enablerendering boolean obsolete since gecko 2.0 historyentry nsishentry get the history entry that this viewer will save itself into when destroyed.

XPCOM Interface Reference
snsiconverterinputstreamnsiconverteroutputstreamnsicookiensicookie2nsicookieacceptdialognsicookieconsentnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeop...

Mail client architecture overview
the mail reader gecko (xul and html rendering) rdf (dynamic widgets) js (menus, events) libmime mail datasources mail javascript folder/message management msgdb imap/nntp/pop3 necko (networking) sections in grey refer to modules outside of mail/news the base module the base module provides a generic interface to a set of protocol-independant messaging services.

Mozilla
gecko's "almost standards" mode "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them.

Drawing and Event Handling - Plugins
here are two examples of plug-ins that have transparent areas: a plug-in that is smaller than the area specified by the enclosing object or embed element a plug-in with nonrectangular boundaries the browser is responsible for rendering the background of a transparent windowless plug-in.

3D view - Firefox Developer Tools
if content isn't displaying, you may be able to figure out why; since the 3d view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.

Waterfall - Firefox Developer Tools
rendering waterfall one pattern that you'll often see in the waterfall view is something like this: this is a visualization of the basic algorithm the browser uses to update the page in response to some event: javascript function call: some event - for example, a dom event - causes some javascript in the page to run.

ANGLE_instanced_arrays.vertexAttribDivisorANGLE() - Web APIs
the angle_instanced_arrays.vertexattribdivisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().

AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
detune: a value in cents to modulate the speed of audio stream rendering.

AudioListener.dopplerFactor - Web APIs
the deprecated dopplerfactor property of the audiolistener interface is a double value representing the amount of pitch shift to use when rendering a doppler effect.

AudioListener - Web APIs
deprecated features audiolistener.dopplerfactor a double value representing the amount of pitch shift to use when rendering a doppler effect.

AudioParam.value - Web APIs
this is reflected by the value getter, which returns the value of the parameter as of the audio rendering engine's most recent render quantum, or moment at which audio buffers are processed and updated.

AudioWorkletNode - Web APIs
it has an associated audioworkletprocessor, which does the actual audio processing in a web audio rendering thread.

AudioWorkletProcessor.process - Web APIs
the method is called synchronously from the audio rendering thread, once for each block of audio (also known as a rendering quantum) being directed through the processor's corresponding audioworkletnode.

AudioWorkletProcessor - Web APIs
it lives in the audioworkletglobalscope and runs on the web audio rendering thread.

Background Tasks API - Web APIs
it's called by the browser when the dom is in a safe condition for us to apply changes during the process of rendering the next frame.

BaseAudioContext.destination - Web APIs
it often represents an actual audio-rendering device such as your device's speakers.

BaseAudioContext - Web APIs
it can be thought of as the audio-rendering device.

Determining the dimensions of elements - Web APIs
in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height.

CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
applications that need to carefully control the timing of rendering and frame capture can use requestframe() to directly specify when it's time to capture a frame.

CanvasGradient - Web APIs
it is returned by the methods canvasrenderingcontext2d.createlineargradient() or canvasrenderingcontext2d.createradialgradient().

CanvasPattern - Web APIs
the canvaspattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.createpattern() method.

A basic ray-caster - Web APIs
this article provides an interesting real-world example of using the <canvas> element to do software rendering of a 3d environment using ray-casting.

Basic animations - Web APIs
draw animated shapes the step where you do the actual frame rendering.

Finale - Web APIs
other web apis these apis might be useful when working further with canvas and graphics: webgl advanced api for rendering complex graphics, including 3d.

ChannelMergerNode - Web APIs
using a channelmergernode, it is possible to create outputs with more channels than the rendering hardware is able to process.