The HTML <canvas> element is utilised for drawing graphics on a web page.
The graphic in the left is made with <canvas>. It displays four elements: a rectangle in red, a rectangle in gradient, a rectangle in multicolor, and text in multicolor.
What is HTML Canvas?
The HTML <canvas> element is utilised for drawing graphics, on the fly, through scripting (most probably JavaScript).
The <canvas> element can be considered as a container only for graphics. You must be using a script to draw the graphics.
Canvas has many methods for drawing many things like paths, boxes, circles, text, and adding images.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvas Examples
A canvas is known as a rectangular area on an HTML page. By default, a canvas does not have any border and content.
The markup may look similar to this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always there is a need specify an id attribute (which should be referred to in a script), and a width, height attribute for defining the canvas size.
You can see an example of a basic, empty canvas as below:
Basic Canvas Example
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Try it Yourself
Drawing with JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
Try it Yourself
Draw a Line
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Try it Yourself
Draw a Circle
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 Yourself
Draw a Text
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Try it Yourself
Stroke Text
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Try it Yourself
Draw Linear Gradient
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);
Try it Yourself
Draw Circular Gradient
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);
Try it Yourself
Draw Image
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
Try it Yourself
HTML Canvas Tutorial
For learning more about HTML <canvas>, you can refer to our full HTML Canvas Tutorial.