May 08, 2013

HTML5 Canvas Basics Part - 2

06:17 Posted by Unknown No comments
Canvas Overview :
   As we have told earlier, canvas specifies a certain space on the web page. So we can have multiple canvas in the same page. Then it would be difficult to keep track of all of them at once. That is why, we alwaysid attribute' to each canvas, so that we can  refer to them in the script, We have the width and height attribute to define the size of the canvas. (The below message will be displayed on your webpage if you have opened the code in a browser which doesn't support canvas)

<canvas id="myCanvas" width="200" height="100">It seems your browser doesn't 
support canvas. Please upgrade to newer version of browser.</canvas>

The above markup defines the canvas on the page..and we can refer to that by 'id', "myCanvas".You can give any id. The width and height attributes define size of the canvas. If we preview this we don't see anything.This is because we have defined a canvas but nothing to show it. Its there but not visible. To realize we add border to canvas tag using style attribute, because by default canvas has no content and border.
The context written in between the canvas tag will be visible for those browsers which don't support canvas. So you can add fallback message there.

Now that we did a few things, we should go for script now...

var c =document.getElementById("myCanvas");
var context = c.getContext("2d");
//Your Stuff here

The context is an object with properties and methods that you can use to render graphics inside the canvas element. Here the context we defined is "2d" .Context can also be "3d". The getContext ("2d") object is a built-in HTML 5 object, with many properties and methods for drawing paths. Each canvas element can only have one context. If we use the getContext( ) method multiple times, it will return a reference to the same context object.
                        Creating basic paths will be discussed in the next post.

                                     Previous Article                           Next Article


Post a comment

Please Enter your comment here......