View this live example.

Canvas

Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

API Canvas Overview Reference

We are going to use a ball for our animation studies, so let's first draw that ball onto the canvas. The following code will set us up.

Canvas Graphics Tutorial

The canvas rendering context provides two methods to render text:

Canvas Graphics Intermediate Tutorial

There are a variety of demos and further explanations about canvas on these sites:

Canvas Graphics Tutorial

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at html5accessibility.com demonstrates how this can be done:

Canvas Graphics Tutorial

The ImageData object represents the underlying pixel data of an area of a canvas object. It contains the following read-only attributes:

Canvas Graphics Intermediate Tutorial

The HTMLCanvasElement.height property is a positive integer reflecting the height HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.

API Canvas HTMLCanvasElement Property

The HTMLCanvasElement.mozOpaque property is a Boolean reflecting the moz-opaque HTML attribute of the <canvas> element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.

API Canvas HTMLCanvasElement Property

The HTMLCanvasElement.width property is a positive integer reflecting the width HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.

API Canvas HTMLCanvasElement Property

The createImageBitmap method accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.

API Canvas Method Reference

The ImageData interface represents the underlying pixel data of an area of a <canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData().

API Canvas ImageData Images

Before we can start drawing, we need to talk about the canvas grid or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. To the right, you see this canvas with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.

Canvas Graphics HTML HTML Canvas HTML5 Intermediate Tutorial

At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. Indeed, the <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. 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.

Canvas Graphics HTML Intermediate Tutorial

Importing images into a canvas is basically a two step process:

Advanced Canvas Graphics HTML Tutorial

CanvasImageSource is a helper type representing any objects of one of the following types: HTMLImageElement, HTMLVideoElement, HTMLCanvasElement, or ImageBitmap.

API Canvas Helper Reference Référence

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.

API Canvas Interface Reference Référence

The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported.

API Canvas HTMLCanvasElement Method Reference

The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. If type is not specified, the image type is image/png. The created image is in a resolution of 96dpi.
The third argument is used with image/jpeg images to specify the quality of the output.

API Canvas HTMLCanvasElement Method Reference

The ImageBitmap interface represents a bitmap image which can be drawn to a <canvas> without undue latency. It can be created from a variety of source objects using the createImageBitmap() factory method. ImageBitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.

API Canvas ImageBitmap Interface Reference