HTML5 Canvas

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

On the canvas (Canvas) draw a red rectangle, gradient rectangle, colored rectangle, and some colored text.


What is canvas?

The HTML5 <canvas> element is used for drawing graphics, which is done through scripts (usually JavaScript).

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

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


Browser support

The numbers in the table represent the version number of the first browser that supported the <canvas> element.

elementChromeInternet ExplorerFirefoxSafariOpera
<canvas>4.09.02.03.19.0

Create a Canvas

A canvas in a web page is a rectangular box drawn by the <canvas> element.

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

A simple example of <canvas> is as follows:

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

Note: Tags usually need to specify an id attribute (often referenced in scripts), and the width and height attributes define the size of the canvas.

lamp You can use multiple

HTML Canvas Border Example

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

Use JavaScript to draw images

The canvas element itself has no drawing capability. 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 for fillStyle is #000000 (black).

The fillRect( x,y,width,height ) method defines how the rectangle is currently filled.


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 at (0,0) in the upper left corner.

Coordinate instance

As shown in the image 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 rectangle frame moved by the mouse.


Canvas – Path

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

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

To draw lines we have to use the “ink” method, like stroke().

Example

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

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

<script>

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

</script>

</body>
</html>

Program Output:-

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


HTML Canvas Circle

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

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

We actually use “ink” methods when drawing circles, such as stroke() or fill().

Example

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

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

<script>

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

</script> 

</body>
</html>

Program Output: Use the arc() method to draw a circle:


Canvas – Text

To draw text using canvas, the important properties and methods are as follows:

  • font – defines the font
  • fillText( text,x,y ) – draws solid text on canvas
  • strokeText( text,x,y ) – draws a hollow text on the canvas

Use fillText():

Example

Draw a 30px high text (solid) on the canvas using the “Arial” font:

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

Example: Use strokeText():
Draw a 30px high text (hollow) on the canvas using the “Arial” font:

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

Program Output:


Canvas – Gradient

Gradients can be filled in rectangles, circles, lines, text, etc. Various shapes can define different colors by themselves.

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 ) – creates a radial/circular gradient

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

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.

Example: Use createLinearGradient():

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

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


Use createRadialGradient():

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 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 )
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML Canvas Reference Manual

The complete properties of tags can be found in the Canvas Reference Manual.

HTML <canvas> tag

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