Knowpapa.com - a developer's blog

Getting Started with HTML5 Canvas

HTML5 canvas markup is expected to take the web by storm as new avenues for its usage are being explored by advertisers, artists, educators, game developers, media, data visualizers and others.

HTML5 implements many new and exciting feature and canvas is perhaps the most powerful of these.

This is the first in a series of tutorials planned to be written on this new and powerful tool.

So what exactly is Canvas ?

Canvas is a standard for applications written in JavaScript that can run within a HTML5 supporting browser. To understand what this means, let us put up a simple “hello world”” application in HTML5 canvas.

 

 
  Your browser doesn't seem to support HTML5.
  Test your browser support for HTML 5 at: http://html5test.com/

And here is the working page demo of HTML5 Canvas.

Things to note

  • True to its name, the canvasmark up simply provides a place holder for our our drawing.
  • Now the actual drawing/text display is executed with Javascript
  • The area to act as canvas is identified in Javascript with the ID selector
  • Canvas provides several built in methods for common task. We used fillText method over here to add text to the canvas
  • The placement of items on the canvas relies on x-y coordinates. We used a 50, 50 coordinate to place the text
  • The place between opening and closing canvas tag holds the message to display if the browser does not support HTML5

Just like we used the fillText method to add text to the canvas, there are several other predefined methods to add items like shapes, video, audio, animation and much more. We explore all this and more