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 ?
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.
- Canvas provides several built in methods for common task. We used
fillTextmethod 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