The read-only ImageBitmap.height property returns the ImageBitmap object's height in CSS pixels.

API Canvas ImageBitmap Property Reference

The read-only ImageBitmap.width property returns the ImageBitmap object's width in CSS pixels.

API Canvas ImageBitmap Property Reference

The readonly ImageData.width property returns the number of pixels per row in the image data object.

API Canvas ImageData Property Reference

The OffscreenCanvas interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.

API Canvas Experimental Interface Reference

RenderingContext is a helper type representing any of the following rendering contexts CanvasRenderingContext2D, WebGLRenderingContext or WebGL2RenderingContext (which inherits from WebGLRenderingContext).

API Canvas Helper Reference Référence

The TextMetrics interface represents the dimension of a text in the canvas, as created by the CanvasRenderingContext2D.measureText() method.

API Canvas Reference Référence TextMetrics

Advanced Canvas Example Graphics HTML Web

Although it's not trivial (for security reasons), it's possible to draw DOM content—such as HTML—into a canvas. This article, derived from this blog post by Robert O'Callahan, covers how you can do it securely, safely, and in accordance with the specification.

Canvas DOM Guide HTML Intermediate SVG

Canvas Graphics Guide HTML HTML5 Intermediate Web

Up until now we have only seen methods of the drawing context. If we want to apply colors to a shape, there are two important properties we can use: fillStyle and strokeStyle.

Canvas Graphics HTML HTML5 Intermediate Tutorial

Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

Canvas Graphics HTML HTML5 Intermediate Tutorial

We can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clearRect() method does) and more.

Canvas Graphics HTML HTML5 Intermediate Tutorial

This sample program demonstrates a number of compositing operations. The output looks like this:

Canvas Example Graphics HTML HTML5 Tutorial

The following is a collection of tips to improve performance

Advanced Canvas Graphics HTML HTML5 Tutorial

Before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings.

Canvas Graphics Guide HTML HTML5 Intermediate Web

The CanvasGradient interface represents an opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient() or CanvasRenderingContext2D.createRadialGradient().

API Canvas CanvasGradient Gradients Interface Reference

The CanvasGradient.addColorStop() method adds a new stop, defined by an offset and a color, to the gradient. If the offset is not between 0 and 1, an INDEX_SIZE_ERR is raised, if the color can't be parsed as a CSS <color>, a SYNTAX_ERR is raised.

API Canvas CanvasGradient Gradients Method Reference Référence

To get an object of this interface, call getContext() on a <canvas> element, supplying "2d" as the argument:

API Canvas CanvasRenderingContext2D Games Graphics Reference

The CanvasRenderingContext2D.addHitRegion() method of the Canvas 2D API adds a hit region to the bitmap. This allows you to make hit detection easier, lets you route events to DOM elements, and makes it possible for users to explore the canvas without seeing it.

API Canvas CanvasRenderingContext2D Experimental Method Reference

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).

API Canvas CanvasRenderingContext2D Method Reference