Home » CSS & XHTML, Javascript & Libraries, Programming Techniques, Web 3.0 » HTML5 Canvas Tutorial & Example. Draw a Rainbow using Arc.

3

The world is slowly adopting HTML5 and it is time to move towards it. HTML5 incorporates many features which were achievable only using third party plug-ins. I am not talking about HTML5 in detail. I just want to give you some light on a great feature which HTML5 ships with, “Canvas”!

“Canvas” which is an HTML5 tag, allows you to render graphics or visual images on the fly through programming in a browser. Very similar to generating graphics (drawing shapes) in Flash using the BitmapData class. To implement canvas in your webpage, you need to define a “canvas” tag in your mark up just like how you define any other container tag like “div”.

<canvas id="myCanvas" width="500" height="200"></canvas>

A canvas object contains a drawing context, which is where we draw graphics. This context can be accessed using Javascript. HTML5 has now defined only a “2D” context in a canvas. The future release of HTML5 may contain a 3D context as well. Let’s now see how to access this 2D context and start drawing.

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
</script>

The context has many methods associated with it which allows us to draw various shapes, fill colors, define styles etc. See the example below which draws a Rainbow in a Canvas. The rainbow is created by drawing 7 circles with different radiuses. You don’t see the full circles because I didn’t define a height for the canvas. The canvas has now the default height and it crops the rest of the part. Play with the code and let me know if you have any questions.

<html>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
canvas.width = width = 470;
var context = canvas.getContext('2d');
var drawCircle = function(color, x, y, radius){
  context.arc(x, y, radius, 0, Math.PI*2, 0);
  context.fillStyle = '#' + 'ceff99ff78f86eeaaffffd45333'.substr(color*3,3);
  context.fill();
  context.beginPath();
};
for(i=0; i<7; i++){
	drawCircle(i%7, width/2, width/2, 250-15*(i+1));
}
</script>
</body>

The best part about the canvas is that, you can save a rendered graphics in the browser as an image by choosing Save Image As from the canvas context menu. I am not sure this feature is available in all the browsers.

Among the versions in Internet Explorer, IE 9 is the only browser which supports HTML5 and canvas. Other Major browsers have been supporting HTML5 for quite a while. To enable canvas feature in IE7+, developers can include a JS library named Explorer Canvas in their code. Download it here: http://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip

The above example code is a simplified version of code written by Marijn Haverbeke.
For a complete documentation on Canvas, see https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

Enjoy!

3 Comments

  1. Nimay says:

    Good tutorial. Please also provide HTML5 game development tutorial

Leave a Reply

Page optimized by WP Minify WordPress Plugin