HTML5 Graphics Canvas

canvas Element

The canvas element provides an easy and powerful way to draw graphics on a web page. This element only acts as a container for graphics. Therefore, to actually draw graphics, you must use a scripting language such as JavaScript.

The major web browser versions that support the canvas element are as follows.

Attributes of the canvas Element

The canvas element is a simple rectangular area in a web page with no border and no content. Therefore, you must set the canvas size with the style attribute.

To access a canvas element from a script, use the id attribute of that element.

Example

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    This sentence appears when the user's web browser does not support the canvas element!
</canvas>

Drawing Rectangles

After defining the canvas, you can draw graphics on the canvas element by using a script.

The following example draws rectangles on a canvas element by using a script.

Example

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

The functions used to draw rectangles in the example above receive arguments in the following order.

1. x-coordinate of the upper-left corner of the rectangle
2. y-coordinate of the upper-left corner of the rectangle
3. Width of the rectangle
4. Height of the rectangle

The script functions used to draw rectangles are as follows.

Drawing Lines

The following example draws lines on a canvas element by using a script.

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();

The script functions used to draw lines are as follows.

Example

You can use line drawing to create shapes, and you can also fill the shapes you create with color.

context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();

In the example above, the moveTo() and lineTo() functions are first used to create a shape by drawing lines. After that, the desired color is specified with fillStyle(), and the fill() function fills the created shape with that color.

Drawing Circles

The following example draws a circle on a canvas element by using a script.

Example

context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();

The arc() function used in the example above receives arguments in the following order.

1. x-coordinate of the circle center
2. y-coordinate of the circle center
3. Radius of the circle
4. Angle where drawing the arc starts
5. Angle where drawing the arc ends

The script functions used to draw circles are as follows.

Example

You can also use circle drawing to easily create arcs.

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

Math.PI is the ratio of a circle's circumference to its diameter, known as pi, and is approximately 3.14159.

Drawing Text

The following example draws text on a canvas element by using a script.

Example

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

The functions used to draw text in the example above receive arguments in the following order.

1. Text to draw on the canvas element
2. x-coordinate of the upper-left corner of the text
3. y-coordinate of the upper-left corner of the text

The script functions used to draw text are as follows.

Drawing Gradients

The following example draws a linear gradient on a canvas element by using a script.

Example

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

The createLinearGradient() function used in the example above receives arguments in the following order.

1. x-coordinate of the point where the linear gradient starts
2. y-coordinate of the point where the linear gradient starts
3. x-coordinate of the point where the linear gradient ends
4. y-coordinate of the point where the linear gradient ends

In this way, createLinearGradient() creates a linear gradient. At this time, you can use addColorStop() to specify the colors used in the gradient. The created gradient can then be drawn by using the fillStyle or strokeStyle property.

The following example draws a radial gradient on a canvas element by using a script.

Example

var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

The createRadialGradient() function used in the example above receives arguments in the following order.

1. x-coordinate of the center of the circle where the radial gradient starts
2. y-coordinate of the center of the circle where the radial gradient starts
3. Radius of the circle where the radial gradient starts
4. x-coordinate of the center of the circle where the radial gradient ends
5. y-coordinate of the center of the circle where the radial gradient ends
6. Radius of the circle where the radial gradient ends

The script functions used to draw gradients are as follows.

The createLinearGradient() and createRadialGradient() functions are not supported in Internet Explorer 8 and earlier.

Drawing Images

The following example draws an image on a canvas element by using a script.

Example

<p><button onclick="drawImage()">Draw image</button></p>
...
<script>
    function drawImage() {
        var srcImg = document.getElementById("Monalisa");
        context.drawImage(srcImg, 10, 10);
    }
</script>

The drawImage() function used in the example above receives arguments in the following order.

1. Address of the image to draw on the canvas element
2. x-coordinate of the upper-left corner of the image
3. y-coordinate of the upper-left corner of the image

The script function used to draw images is as follows.