HTML 5 Canvas

The <canvas> tag defines graphics, such as charts and other images. 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.

Create a canvas (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

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>Novice Tutorial</title> 
	</head>
	<body>

		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
			Your browser does not support the HTML5 canvas tag.
		</canvas>

	</body>
</html>

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

Example analysis:

First, find the <canvas> element:

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

Then, create the 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 150×75 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.




Canvas-path

To draw lines on Canvas, we will 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

We must use the “ink” method to draw lines, just like stroke().

Example

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

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

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

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

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

Use strokeText():

Example

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

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

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

Use createRadialGradient():

Example

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-Image

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

  • drawImage( image,x,y )

Example

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

HTML Canvas Reference Manual

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

HTML <canvas> Tag

Tag
Description
<canvas>

HTML5’s canvas element uses JavaScript to draw images on web pages.