How to use canvas tag in HTML5?

USE OF HTML5 CANVAS TAG

HTML5 <canvas> Tag

So far there was no mechanism for creating graphics and animations in web pages. Technologies such as flash and Silverlight have been used for this. But now HTML5 makes web developers able to create game, graphics, and animations directly in web pages.

Now, you can show animations on the webpages, you do not need to add any kind of flash file on the webpage. Apart from this, you don't even need any type of extension like flash player, to show you the animation.

HTML5 <canvas> tag is used to do graphics design on the webpage. <canvas> tag works only as a container for graphics. You can use a scripting language to draw graphics in it. Mostly javascript is used for this.

Canvas itself has a different technology. With it, you have different methods available to draw different graphics. These methods are accessed through the context of the canvas.

Some features of Canvas technology are below.

Animation

- Every object drawn on <canvas> can be animated. Using <canvas> you can create simple animations to complex animations such as bouncing the ball.

Interactive

- <canvas> supports all HTML event attributes. <canvas> can respond to every event which is generated by the user. For example, the user can respond to <canvas> when clicking on the mouse or pressing the key.

Flexible

- You can draw text and different shapes like circle, rectangle, lines etc. on <canvas>. Other than this, you can also add audio and video to the canvas.

Reusable

- Once you create it, you can display <canvas> anywhere because all browsers support it. It is not possible with flash or Silverlight technology.

Standard

 - You can use this Canvas technology safely because it is a standard. It is not that this technology will be replaced in the future.

Platform

 - In addition to all browsers, canvas technology can be used on all types of devices such as desktop mobile etc.

Some common applications of Canvas technology 

Gaming

- Canvas technology provides the ability to create an animation of every level. It is being used to develop gaming applications.

Advertising

- Flash technology which is used for advertising can be replaced by canvas.

Education & Training

- Because canvas technology provides graphical possibilities. Therefore it can also be used for training and education.

Syntax of HTML5 <canvas> Tag

The general syntax of the lower <canvas> tag is given.

<canvas id = "canvas-id" width = "Integer number" height = "Integer number">
     You can show a message here.
     This message can be placed inside paragraph or span element.
</canvas>

       As you can see in the syntax which is given above, the id, width and height attributes have been defined in the canvas tag. When you specify an <canvas> element then defining these attributes is mandatory.

In these attributes, the id attribute is used to get the context of <canvas> by javascript and Width and height attributes define the length and breadth of the canvas. The <canvas> tag is closed from the </canvas> ending tag.

<Canvas> does not show properly unless you specify the border of <canvas>. You can define <canvas> border by the style attribute as below.

             <canvas id = "canvas-id" width = "number" height = "number" style = "border: 1px solid # 000000">

                       Message for when the browser does not support
               </canvas>

        The simple syntax for getting the context of <canvas> is given by JavaScript.

                     var canv = document.getElementById ("canvas-id");

                     var cntxt = canv.getContext ("2d");

As you can see in the above syntax, the canvas is first accessed by the DOM as an object. After that, the context of the canvas is obtained by calling the getContext method on that object. In this method, you pass 2d. This suggests that the graphics will be in 2d shape.

Whenever you draw a graphic, you should always remember that the origin of the coordinates in the canvas always starts from position (0,0) in the top left corner. When you draw something then the x coordinate (horizontal) is increased in the right side and y coordinate (vertical) towards the bottom.

For example, if you want to draw a line from left 100 and top 80 coordinates, then write it like this.

                lineTo(100,80);

Similarly, you can draw other graphics based on these coordinates.

Attributes of HTML5 <canvas> Tag

      <canvas> tag supports all HTML global attributes (class, id etc.) and events attributes (onmouseover, onclick, etc.).

How to use canvas tag in html5?

Example of HTML5 <canvas> Tag

An example of drawing a rectangle by the lower <canvas> element is given.

<!DOCTYPE html>

<html>
<body>
<canvas id = "mbhCanvas" width = "400" height = "400" style = "border: 1px solid #ff005e;">
If your browser does not support HTML5 canvas element. Switch to a browser that supports the this element.
</canvas>
<script>
var can = document.getElementById ("mbhCanvas");
var cntxt = can.getContext ("2d");
cntxt.fillStyle = 'red';
cntxt.fillRect (100,100,200,200);
</script>
</body>
</html>

The above example produces the below output. 

HTML5 CANVAS TAG EXAMPLE

Compatible Browser

        There is the list of browser's first version which supports canvas tag.

                1. Google Chrome 4.0
                2. Firefox 2.0
                3. Internet Explorer 9.0
                4. Opera 9.0
                5. Safari 3.1

     << PREVIOUS                                                                                                              NEXT >>