HTML5 Canvas

The <canvas> tag defines graphics, such as charts and other images, and you must use scripts to draw graphics.

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

What is Canvas?

HTML5 <canvas> element is used to draw graphics, which is done by script (usually JavaScript).

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

You can use canvas to draw paths, boxes, circles, characters and add images in a variety of ways.

Browser support

The number in the table indicates the version number of the first browser that supports the <canvas> element.

Browser
<canvas>	4.0	9.0	2.0	3.1	9.0

Create a canvas

A canvas is a rectangular frame in a web page, which is drawn by the <canvas> element.

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

A simple example of <canvas> is as follows:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: The label usually needs to specify an id attribute (often quoted in scripts), and the size of the canvas defined by the width and height attributes.

Tip: You can use multiple <canvas> elements in HTML pages.

Use the style attribute to add a border:

Example

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

 Try It! 

Use JavaScript to draw images

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

Example

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

 Try It! 

Example analysis:

First, find the <canvas> element:

var c=document.getElementById("myCanvas");

Then, create a context object:

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

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

The following two lines of code draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

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

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

Canvas coordinates

Canvas is a two-dimensional grid.

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

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

Meaning: draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

Coordinate example

As shown in the figure below, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular frame moved by the mouse.

                            X

     Y

Canvas-path

To draw lines on Canvas, we can use the following two methods:

• moveTo( x,y ) defines the starting coordinates of the line

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

To draw lines, we must use the "ink" method, just like stroke().

Example

Define the start coordinate (0,0), and the end coordinate (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();

 Try It! 

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

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

In fact, we use the "ink" method when drawing a circle, such as stroke() or fill().

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();

 Try It! 

Canvas-text

Use canvas to draw text, the important properties and methods are as follows:

• font-defines the font

• fillText( text,x,y ) - draw solid text on canvas

• strokeText( text,x,y ) - draw hollow text on canvas

Use fillText():

Example

Use the "Arial" font to draw a 30px high text (solid) on the canvas:

JavaScript:

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

Try It! 

Use strokeText():

Example

Use the "Arial" font to draw a 30px high text (hollow) on the canvas:

JavaScript:

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

 Try It! 

Canvas-gradient

Gradients can be filled in rectangles, circles, lines, texts, etc., and various shapes can be defined with different colors.

There are two different ways to set the Canvas gradient:

• createLinearGradient( x,y,x1,y1 ) - create a line gradient

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

When we use gradient objects, we must use two or more stop colors.

The addColorStop() method specifies the color stop, and the parameters are described by coordinates, which can be 0 to 1.

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

Use createLinearGradient():

Example

Create a linear gradient. Fill the rectangle with a gradient:

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 the gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 Try It! 

Use createRadialGradient():

Example

Create a radial/circular gradient. Fill the rectangle with a gradient:

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 the gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 Try It! 

Canvas-Image

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

• drawImage( image,x,y )

Use images:

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);

 Try It! 

HTML Canvas Reference Manual (under construction)

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

HTML <canvas> Tag