PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
Tutorial on HTML5 Canvas element

HTML5 has many new interesting features out of which one is the HTML5 canvas element. With the help of this new HTML element tag "<canvas >" and scripting, usually JavaScript which is very simple to use and understand, we can draw graphics, graphs, make photo compositions or do simple animations.


The HTML5 canvas is a rectangular area and its size is controlled with the help of two attributes: width and height. While specifying the attributes, we should make sure that the values we provide are valid non-negative integers. If any attribute is missing, or if passing its value returns an error, then the default value is used instead. The by default values for width and height attributes are 300 and 150 respectively.

The canvas element is specified as follows:

eg: <canvas id="Canvas" width="900" height="120"></canvas>

Once we specify the dimension of canvas, next surely is drawing. As canvas element doesnot have any drawing abilities of its own, we shall use simple javascript to do the same.

Now with the help of this HTML5 canvas element and javascript, we will learn to make simple graphics.

HTML5 canvas / javascript to draw a simple line is shown below:

Your browser doesn't support canvas.

Complete code:

<canvas id="Canvas" width="250" height="150"></canvas>

<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "#000000"; cxt.lineTo(80,30);
cxt.moveTo(80,120);
cxt.stroke();
</script>

Explanation:
First line of javascript extracts canvas element id ("canvas" in this case).

var c=document.getElementById("canvas");

Second line of javascript is used to create a context object.
var cxt=c.getContext("2d");

Third line, specifies color of the line.

cxt.strokeStyle = "#000000";

Fourth line, specifies beginning / initial position of the line.

cxt.lineTo(80,30);

Fifth line, specifies end / final position of the line.

cxt.moveTo(80,120);


HTML5 canvas / javascript to draw rectangle:

Your browser doesn't support canvas.

Complete code:

<canvas id="Canvas" width="250" height="150">/canvas>

<script type="text/javascript">
var c=document.getElementById("canvas1");
var cxt=c.getContext("2d");
cxt.fillStyle="#007979";
cxt.fillRect(25,28,200,95);
</script>

Explanation:
In the second example, we have created a rectangle. There are 2 ways to do this -
1. By putting together a bunch of code for single lines.
2. Script for rectangle (the one used for the above example).

<canvas id="Canvas" width="250" height="150">/canvas>

<script type="text/javascript">
var c=document.getElementById("canvas1");
var cxt=c.getContext("2d");
cxt.fillStyle="#007979";
cxt.fillRect(25,28,200,95);
</script>

cxt.fillStyle="#33CCCC";
cxt.fillRect(25,28,200,95);

In the above lines of code, the first line has been used to give color to the rectangle. Whereas, the second line has been used to make a rectangle. The format for the same is (x-position, y-position, width, height).

HTML5 canvas / javascript to draw circle / gradient fill:

Your browser doesn't support canvas.

Complete code:

<script type="text/javascript">
var c=document.getElementById("canvas2");
var cxt=c.getContext("2d");
cxt.fillStyle="#0080AA";
cxt.beginPath();
cxt.arc(80,70,35,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

Explanation:
In the third example, we have created two circles. To make the first circle we start by giving fill color to it and then we specify the circle dimensions i.e. a circle with radius of 35, the x and y positions of 80 and 70 resp. rotated through the angles of 0 to 2*Pi radians.

Now the same code has been used to make the second circle as well, but instead of giving a single fill color, we have given a gradient effect to this one. The complete code is as follows:

<script type="text/javascript">
var c=document.getElementById("canvas2");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.arc(160,70,35,0,Math.PI*2,true);
cxt.closePath();
var grd=cxt.createLinearGradient(0,0,185,50);
grd.addColorStop(0,"#004962");
grd.addColorStop(1,"#B9EEEE");
cxt.fillStyle=grd;
cxt.fill();
</script>

We can specify the extent of gradient with the use of the following line.

var grd=cxt.createLinearGradient(0,0,185,50);

In the next two lines we have specified the first and the second color of the gradient.

grd.addColorStop(0,"#004962");
grd.addColorStop(1,"#B9EEEE");

Using all the above mentioned components of HTML5 canvas, we can create various detailed graphics, an example of which is displayed below. This brings us to the end of the tutorial. Hope that this tutorial is of some help to you.

Your browser doesn't support canvas.

 



Tags: HTML5 Canvas property, drawing with HTML5, Line in HTML5, gradient fill in HTML5
Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.