The Canvas

<canvas id="example" width="150" height="150"></canvas>

The <canvas> element has only two attributes, width and height.

When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.

Providing fallback content is very straightforward: just insert the alternate content inside the <canvas> element.

Browsers that don't support <canvas> will ignore the container and render the fallback content inside it.

Browsers that do support <canvas> will ignore the content inside the container, and just render the canvas normally.

We could provide a text description of the canvas content...

 fallback content 

or provide a static image of the dynamically rendered content

Сontext

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.

The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it.

The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.

var canvas = document.getElementById('example'); 
var ctx = canvas.getContext('2d');

The first line in the script retrieves the node in the DOM representing the <canvas> element.

Once you have the element node, you can access the drawing context using its getContext() method

var canvas = document.getElementById('example'); 
if (canvas.getContext) { 
	var ctx = canvas.getContext('2d');
 	// drawing code here 
} else { 
	// canvas-unsupported code here 
}

A simple example

function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
		var ctx = canvas.getContext('2d');
		ctx.fillStyle = 'rgb(200, 0, 0)';
		ctx.fillRect(10, 10, 50, 50);
		ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
		ctx.fillRect(30, 30, 50, 50);
	}
}

Drawing shapes with canvas

The grid

Drawing shapes with canvas

Drawing rectangles

There are three functions that draw rectangles on the canvas:

Each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size.

function draw() {
	var canvas = document.getElementById('canvas'); 
	if (canvas.getContext) { 
		var ctx = canvas.getContext('2d');
		ctx.fillRect(25,25,100,100);
		ctx.clearRect(45,45,60,60);
		ctx.strokeRect(50,50,50,50);
	}
}

Drawing shapes with canvas

Drawing paths

Path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color.

To make shapes using paths, we take some extra steps:

1. First, you create the path.
2. Then you use drawing commands to draw into the path.
3. Once the path has been created, you can stroke or fill the path to render it.

Here are the functions used to perform these steps:

1. The first step to create a path is to call the beginPath().
2. The second step is calling the methods that actually specify the paths to be drawn.
3. The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start.

function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
		var ctx = canvas.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(75, 50);
		ctx.lineTo(100, 75);
		ctx.lineTo(100, 25);
		ctx.fill();
	}
}

When the canvas is initialized or beginPath() is called, you typically will want to use the moveTo() function to place the starting point somewhere else.

This method takes two arguments, x and y, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc.

Path2D objects

Applying styles and colors

Colors

Transparency

Line styles

lineWidth = value — Sets the width of lines drawn in the future. Values must be positive numbers. By default this value is set to 1.0 units.

Line styles

lineCap = type — Sets the appearance of the ends of lines. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

Line styles

lineJoin = type — Sets the appearance of the "corners" where lines meet. There are three possible values for this property: round, bevel and miter. By default this property is set to miter.

Line styles

Gradients

createLinearGradient(x1, y1, x2, y2) — Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).

Gradients

createRadialGradient(x1, y1, r1, x2, y2, r2) — Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.

Shadows

Shadows

Drawing text

Using images

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

1. Get a reference to an HTMLImageElement object or to another canvas element as a source. It is also possible to use images by providing a URL.
2. Draw the image on the canvas using the drawImage() function.

Drawing images

Scaling

Slicing

Basic animations

These are the steps you need to take to draw a frame:

1. Clear the canvas
2. Save the canvas state
3. Draw animated shapes
4. Restore the canvas state

Controlling an animation

Browser compatibility

• Mozilla applications gained support for <canvas> starting with Gecko 1.8 (Firefox 1.5).
• The element was originally introduced by Apple for the OS X Dashboard and Safari.
• Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project.
• Google Chrome and Opera 9 also support <canvas>.