HTML5 Canvas

The <canvas> tag defines graphics, such as charts and other images, which must be drawn using scripting (usually JavaScript).

Draw a red rectangle, a gradient rectangle, a colored rectangle, and some colored text on the canvas.

What is Canvas?

The HTML5 <canvas> element is used for drawing graphics, via scripting (usually JavaScript).

The <canvas> tag is just a container for graphics; you must use a script to actually draw the graphics.

You can use various methods to draw paths, boxes, circles, characters, and add images using canvas.

Browser Support

The numbers in the table specify the first browser version that supports the <canvas> element.

Creating a Canvas

A canvas is a rectangular area on a web page, defined by the <canvas> element.

Note: By default, the <canvas> element has no border and content.

Here is a simple example of a <canvas>:

Note: The tag usually requires an id attribute (often referenced in scripts), and the width and height attributes define the size of the canvas.

Tip: You can use multiple <canvas> elements on a single HTML page.

Use the style attribute to add a border:

Example

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Drawing with JavaScript

The canvas element itself has no drawing capabilities. All drawing must be done within JavaScript:

Example

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

Example Explanation:

First, find the <canvas> element:

Then, create a context object:

The getContext("2d") object is built-in in HTML5 and has several methods for drawing paths, rectangles, circles, characters, and adding images.

The following two lines draw a red rectangle:

The fillStyle property can be a CSS color, gradient, or pattern. The default fillStyle is #000000 (black).

The fillRect(x, y, width, height) method defines the current fill style of the rectangle.

Canvas Coordinates

The canvas is a two-dimensional grid.

The upper-left corner of the canvas has coordinates (0,0)

The fillRect method above has parameters (0,0,150,75).

This means: Draw a 150x75 rectangle, starting from the upper-left corner (0,0).

Coordinate Example

As shown in the image, the X and Y coordinates are used to position the drawing on the canvas. Move the mouse over the rectangle to see the positioning coordinates.

Canvas - Paths

To draw lines on a canvas, we use the following methods:

• moveTo(x, y) defines the start coordinates of the line
• lineTo(x, y) defines the end coordinates of the line

To draw the line, we must use an "ink" method, like stroke().

Example

Define the start coordinates (0,0) and the end coordinates (200,100). Then use the stroke() method to draw the line:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

To draw a circle on the canvas, we use the following method:

arc(x, y, r, start, stop)

We actually use an "ink" method, such as stroke() or fill(), when drawing a circle.

Example

Use the arc() method to draw a circle:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Canvas - Text

To draw text on a canvas, the important attributes and methods are:

• font - defines the font
• fillText(text, x, y) - draws filled text on the canvas
• strokeText(text, x, y) - draws outlined text on the canvas

Using fillText():

Example

Draw a 30px high text (filled) on the canvas using the "Arial" font:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Using strokeText():

Example

Draw a 30px high text (outlined) on the canvas using the "Arial" font:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Canvas - Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc. Different shapes can be defined with different colors.

There are two different methods to set up gradients on a canvas:

• createLinearGradient(x, y, x1, y1) - creates a linear gradient
• createRadialGradient(x, y, r, x1, y1, r1) - creates a radial/circular gradient

When using a gradient object, you must define at least two stop colors.

The addColorStop() method specifies the color stops, using coordinates that can be from 0 to 1.

To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, such as a rectangle, text, or a line.

Using createLinearGradient():

Example

Create a linear gradient. Use the gradient to fill a rectangle:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Using createRadialGradient():

Example

Create a radial/circular gradient. Use the gradient to fill a rectangle:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Canvas - Images

To place an image on the canvas, use the following method:

• drawImage(image, x, y)

Example

Place an image on the canvas:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

HTML Canvas Reference

For the complete attributes of the tag, refer to the Canvas Reference.

HTML <canvas> Tag

For more content, refer to: Learn HTML5 Canvas in One Article