HTML5 Canvas

The canvas element is used to draw graphics on the web page.

What is Canvas?

HTML5's canvas element uses JavaScript to draw images on the web page.

The canvas is a rectangular area, where you can control each pixel.

Canvas has various drawing methods such as paths, rectangles, circles, characters, and adding images.

Create a Canvas element

Add a canvas element to the HTML5 page.

Specify the element's id, width, and height:

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

Drawing through JavaScript

The canvas element itself has no drawing capabilities. All drawing work must be completed internally in JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript uses id to find the canvas element:

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

Then, create the context object:

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

The "getContext("2d")" object is a built-in HTML5 object that has various methods for drawing paths, rectangles, circles, text, and adding images.

The following two lines of code draw a red rectangle:

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

The fillStyle method colors it red, and the fillRect method specifies the shape, position, and size.

Understanding Coordinates

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

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

As shown in the figure below, the X and Y coordinates of the canvas are used to position the drawing on the canvas.

Canvas Instance: Understanding Coordinates

Example: Hover over the rectangle to see the coordinates

More Canvas Examples

Below are more examples of drawing on the canvas element:

Example - Line

Draw a line by specifying where it starts and ends:

Canvas Instance: Lines

JavaScript Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

Canvas Element:

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

Try It Yourself

Example - Circle

Draw a circle by specifying the size, color, and position:

Canvas Instance: Circles

JavaScript Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

Canvas Element:

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

Try It Yourself

Example - Gradient

Draw a gradient background using the color you specify:

Canvas Instance: Gradients

JavaScript Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

Canvas Element:

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

Try It Yourself

Example - Image

Place an image on the canvas:

Canvas Instance: Images

JavaScript Code:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

Canvas Element:

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

Try It Yourself

HTML Canvas Tutorial

For more knowledge about the canvas, please visit our HTML Canvas Tutorial.

Related Pages

Reference Manual:HTML5 <canvas> Tag

Reference Manual:HTML DOM Canvas Object