HTML5 Canvas

What is Canvas?

The HTML5 <canvas> element is used for drawing graphics, which is done by a script (usually JavaScript).

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

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

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

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.

Note : The <canvas> element is not supported in browsers of Internet Explorer 8 and earlier versions of IE.

Create a canvas (Canvas)

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

Note : The <canvas> element has no borders and content by default.

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 the script), the size of the canvas defined by the width and height attributes.

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

Use the style attribute to add a border:

Run the program and try it out

Use JavaScript to draw an image

The canvas element itself is not capable of drawing. All drawing work must be done inside JavaScript:

Instance resolution:

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 a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

The following two lines of code draw a red rectangle:


Set the fillStyle property to be a 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).

This means: draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).

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 rectangular frame where the mouse moves.

Canvas - path

Draw a line on the Canvas, we will use the following two methods:

moveTo(x,y) defines the line start coordinates

lineTo(x,y) defines the line ending coordinates

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

Define the starting coordinates (0,0), and the ending coordinates (200,100). Then use the stroke() method to draw the lines:

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


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


Draw a circle using the arc() method:


Canvas - text

Use canvas to draw text. The important properties and methods are as follows:

Font - define the font

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

strokeText(text,x,y) - draws hollow text on the canvas


Canvas - Gradient
Gradient 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) - Create a radial/circular gradient

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

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

Use a gradient, set the value of fillStyle or strokeStyle to a gradient, and then draw a shape such as a rectangle, text, or a line.


Create a linear gradient using createLinearGradient(). Fill the rectangle with a gradient:

Program running result:



Create a radial/circular gradient using createRadialGradient(). Fill the rectangle with a gradient:


Canvas - image

You can put a picture on the canvas so you can do some work on the picture and add some material you want, such as text or something.

Place an image on the canvas using the following method:



Place an image on the canvas:


HTML Canvas Reference Manual

The full properties of the label can be found in the Canvas Reference Manual.

The HTML <canvas> tag

     label     description
     <canvas>HTML5's canvas element uses JavaScript to draw an image on a web page.

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :