Introduction to HTML5 Canvas

HTML5 Canvas element offers a wide range of features which were once possible only with the help Flash and Action Scripting. Using HTML5 canvas, we can render 2-D and 3-D animations on a html page. While 2-D is quite popular now and most browsers support this, 3-D is yet to become a major buzz. But soon it ought to be the way ahead for browser based animations(CSS3 would be another option, but its nowhere near to canvas).

Advantages of using HTML5 Canvas tag

  • Dynamic graphics
  • Online and Offline games
  • Animations
  • Interactive Video & Audio

Dis-advantages of using HTML5 Canvas tag

Canvas is a really cool technology, but it has 3 significant concerns/challenges (not necessarily in order)

  • Its text support is very newish so getting a font onto a canvas only works in the latest stuff (in other cases you need HTML/CSS overlays) or nasty hacks to draw the letter forms onto the canvas.
  • Interactivity is a hack and half. If you want to make a canvas drawing clickable you are forced to use an overlaid image maps or div tags or do some nutty pixel map catching events and figuring out what pixels they hit. A canvas image is a rendered bit map and really not meant to be interacted with how many people want.
  • No native IE support. Sorry that translation library doesn’t cut performance wise it for anything significant and clearly IE is still a browser force whether you like it or not.

Browser Support

IE FireFox Safari Chrome Opera iPhone Android
7.0 + * 3.0 + 3.0 + 3.0 + 10.0 + 1.0 + 1.0 +

* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports canvas natively.

Following is a simple example to give an insight about using canvas.

Step 1

Add canvas to the html DOM

    <canvas height="300" width="500" id="canvas"></canvas>
Step 2

Adding color fill to the canvas using canvas properties using javascript.

		var canvas 		= document.getElementById("canvas");
		var c 			= canvas.getContext("2d");
		c.fillStyle 		= "Red";
		c.fillRect(10, 10, 400, 250); // X-Axis, Y-Axis, Width, Height
Step 3

Run the page in a browser and you will get something like this :


More to follow in coming posts regarding canvas. Thanks for reading. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *