Reader Level:
ARTICLE

How to Use Canvas in HTML5

Posted by Aditya Gaur Articles | HTML 5 May 31, 2012
This article describes the canvas element in HTML5 by use of of an example.
  • 0
  • 0
  • 3046

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
 

 

Article Extensions
Contents added by Mike Gold on Jun 03, 2012

Here is the equivalent in CoffeeScript (CoffeeScript compiles into JavaScript and can be plugged into Visual Studio via a codeplex add in called Chirpy).  Note it forms much cleaner classes and cleaner code in general than JavaScript as far as readability

Capture.PNG


capture2.PNG 


Here is the HTML/JQuery that calls the generated JavaScript:

<!DOCTYPE html>

<html>

<head>

    <title>Canvas Game</title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="Scripts/BouncingBalls.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            canvas = $("#mygame").get(0);

            context = canvas.getContext('2d');

            document.initBouncingBall(canvas, context);

        });

    </script>

</head>

<body>

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

</body>

</html>

v



 

COMMENT USING

Trending up