Reader Level:
Article

How to Use Canvas in HTML5

By Aditya Gaur on May 31, 2012
This article describes the canvas element in HTML5 by use of of an example.

Introduction

In this article we will learn about the canvas element in HTML5 by using an example. The <canvas> element is used to draw graphics, on the fly, via a scripting language like JavaScript.

Create a Canvas

A Canvas drawable region is defined in HTML code with height and width attributes by specifying id, width and height of the <canvas> element.

<
canvasid="mygame"width="1500"height="900">
</
canvas>

Canvas Drawing

The <canvas> element has no drawing abilities of its own so all drawing must be done inside JavaScript and JavaScript uses the id to find the <canvas> element.

In our example we use two variables, a and b, to define the axis. We create a function Sphere and pass color, radius, da and db as parameters. These parameters are used to create Spheres of different size, color and direction.

<
scripttype="text/javascript">
    var a = 40;
    var b = 50;
    function Sphere(color, radius, da, db) {
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
        this.radius = radius;
        this.a = a;
        this.b = b;
        this.da = da;
        this.db = db;
        this.color = color;
    }
    Sphere.prototype.form = function () {
        this.context.beginPath();
        this.context.fillStyle =this.color;
        this.context.arc(this.a,this.b, this.radius, 0, Math.PI * 2, false);
        this.context.fill();
    }
    Sphere.prototype.Jump = function () {
        if (this.a >= (canvas.width - this.radius) ||this.a <= this.radius) this.da *= -1;
        if (this.b >= (canvas.height - this.radius) ||this.b <= this.radius) this.db *= -1;
    }
    function init() {
        canvas = document.getElementById("mygame")
        context = canvas.getContext('2d');
        // form an arry to store the Sphere info
        Spheres = [];
        Spheres.push(new Sphere('Olive', 40, 1, 3));
        Spheres.push(new Sphere('Silver', 40, 2, 3));
        Spheres.push(new Sphere('Lime', 40, 3, 4));
        Spheres.push(new Sphere('Grey', 40, 4, 1));
        Spheres.push(new Sphere('Pink', 40, 2, 4));
        Spheres.push(new Sphere('Navy', 50, 3, 3));
        Spheres.push(new Sphere('Teal', 40, 3, 5));
        Spheres.push(new Sphere('Blue', 30, 4, 3));
        Spheres.push(new Sphere('Black', 30, 3, 9));
        Spheres.push(new Sphere('Red', 30, 1, 6));
        Spheres.push(new Sphere('Blue', 40, 2, 8));
        Spheres.push(new Sphere('Green', 40, 3,8));
        Spheres.push(new Sphere('Orange', 30, 4, 4));
        Spheres.push(new Sphere('Yellow', 40 , 4, 9));
        setInterval(form, 20);
    }
    function form() {
        context.clearRect(0, 0, 2000, 1000);
        for (iin Spheres) {
            Spheres[i].a += Spheres[i].da;
            Spheres[i].b += Spheres[i].db;
            Spheres[i].Jump();
            Spheres[i].form();
        }
    }
  </script>

Canvas 2D API

The canvas element has no drawing abilities of its own and is a rectangular area where you can control every pixel using scripting. We use canvas.getContext('2d') to create a Sphere shape and getContext("2d") object has methods to draw lines, boxes, circles, and more.

setInterval Method

The setInterval method is used to call a function or evaluate an expression at specified intervals (in milliseconds), like this:

setInterval(code,millisec,lang)

The Complete code look like this:

<!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
    <title>Canvas Game</title>
<
script type="text/javascript">
    var a = 40;
    var b = 50;
    function Sphere(color, radius, da, db) {
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
        this.radius = radius;
        this.a = a;
        this.b = b;
        this.da = da;
        this.db = db;
        this.color = color;
    }
    Sphere.prototype.form = function () {
        this.context.beginPath();
        this.context.fillStyle =this.color;
        this.context.arc(this.a,this.b, this.radius, 0, Math.PI * 2, false);
        this.context.fill();
    }
    Sphere.prototype.Jump = function () {
        if (this.a >= (canvas.width - this.radius) ||this.a <= this.radius)this.da *= -1;
        if (this.b >= (canvas.height - this.radius) ||this.b <= this.radius)this.db *= -1;
    }
    function init() {
        canvas = document.getElementById("mygame")
        context = canvas.getContext('2d');
        // form an arry to store the Sphere info
        Spheres = [];
        Spheres.push(new Sphere('Olive', 40, 1, 3));
        Spheres.push(new Sphere('Silver', 40, 2, 3));
        Spheres.push(new Sphere('Lime', 40, 3, 4));
        Spheres.push(new Sphere('Grey', 40, 4, 1));
        Spheres.push(new Sphere('Pink', 40, 2, 4));
        Spheres.push(new Sphere('Navy', 50, 3, 3));
        Spheres.push(new Sphere('Teal', 40, 3, 5));
        Spheres.push(new Sphere('Blue', 30, 4, 3));
        Spheres.push(new Sphere('Black', 30, 3, 9));
        Spheres.push(new Sphere('Red', 30, 1, 6));
        Spheres.push(new Sphere('Blue', 40, 2, 8));
        Spheres.push(new Sphere('Green', 40, 3,8));
        Spheres.push(new Sphere('Orange', 30, 4, 4));
        Spheres.push(new Sphere('Yellow', 40 , 4, 9));
        setInterval(form, 20);
    }
    function form() {
        context.clearRect(0, 0, 2000, 1000);
        for (i in Spheres) {
            Spheres[i].a += Spheres[i].da;
            Spheres[i].b += Spheres[i].db;
            Spheres[i].Jump();
            Spheres[i].form();
        }
    }
  </script>
</
head>
<
body onLoad="init();">
<
canvas id="mygame" width="1500"height="900"></canvas>
</
body>
</
html>

Output

 

adiii.jpg
 

 

COMMENT USING