HTML5 Canvas Basics

The new <canvas> element is a simple rectangular block level element where you can render bitmap images. Like many of the new elements, <canvas> is intended to reduce the use of plugins, increase device independent implementation and reduce load times. With <canvas> many simple animations can be rendered on a page using simple JavaScript.

Canvas is part of the shift towards integrating dynamic web capabilities into the new HTML standard. This is why canvas isn’t just a simple tag that can be styled. It is really the canvas API. The Canvas element has to be used in conjunction with a set of JavaScript functions which defines the canvas API.

The Basics

The markup for <canvas> is very simple.  You have to give it an id, and specify height and width. You can fix the position of the canvas on your page like any other block level element using CSS.

Let us look at a simple html for a canvas element

<canvas id= "drawing" width= "400" height= "200" > </canvas>

Just like a <div> element the canvas element using the color of the body element to set its background color. To make the canvas element visible let us give it a border.

<canvas id= "drawing" width= "400" height= "200" style= "border:1px solid black"> </canvas>

Here is what it looks like in the browser.

As you can see, the background color for the canvas element is the background color of the body element, unless otherwise specified.

Creating Bitmap Images

For the moment canvas can only be used to create two dimensional images. Any location on the canvas can be defined by x and y coordinates. The top left corner of the canvas is 0, 0 and the bottom right is given by the width and height of the canvas.

In order to render bitmap images on the <canvas> element, you have to use JavaScript.

The Canvas API defines a set of JavaScript methods you can use create bitmap images inside the canvas element. Go here for a full list.

Let us use a JavaScript to create a simple white rectangle on our canvas.

The first important method you should familiarize yourself with is the getContext("2d") method, which returns the built-in 2D object. This object has several methods that can be used to create all kinds of bitmaps.

We will use the fillRect() method and the fillStyle() method to create a rectangle and fill it with a color.

Here is our script

<script>

window.onload = function() {

var canvas=document.getElementById("drawing"); // grabs the canvas element

var context=canvas.getContext("2d"); // returns the 2d context object

context.fillStyle= "#ffffff"; // sets color

context.fillRect(10,10,100,50); // sets top left location points x,y and then width and height

}

</script>

Here is what it looks like in the browser