HTML 5 Canvas element

The other day, I wrote about Geolocation API, an interesting feature that is part of the HTML 5 specification. Apart from Geolocation support, there are some other new things also coming with HTML 5 and one of those is the Canvas html element. A website can use a Canvas element to draw graphics on the fly using a scripting language. This way, a developer can draw a graph or an animation in real time using a client side script, such as JavaScript.

Usually such kinda graphics are accomplished either by Flash or a complex JavaScript codings. But, with canvas, graphics are got just easier on webpage. There are many areas on which a canvas element can be used effectively. Financial websites which need to draw graphs, online gaming website, showing a bar/pie chart to your user are some example for using canvas element.

Using Canvas Element

If you want to use canvas element, you can easily do that just by following the below steps.

Define a <canvas> tag in your HTML page and assign a ‘id’ value to it, so that this element can be uniquely selected using JavaScript.
Add an optional fallback content. Fall back content is just a message which will be displayed instead of Canvas element, if that browser is not supporting Canvas.
In your JavaScript, select the canvas element using the ID and then get the canvas context using the method getContext. For example, canvas.getContext(“2d”) will return the 2D rendering context, on which you can draw your graphics.
using the context, draw your graphics.

Sample code for using Canvas element

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("drawing-canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="drawing-canvas" width="150" height="150"></canvas>
 </body>
</html>

More resources on Canvas element

A complete set of methods supported by the 2D context can be seen from this page. Mozilla is hosting a basic example for using canvas element, where you can learn the canvas element’s basics. And to see what and all is possible with canvas element, check out 5 clever uses of canvas element.

Follow me on Twitter to get notified whenever I update this blog.