HTML5 Canvas Basics part-3

                                           Drawing a line 

       Now that we have setup canvas and context, it's time for methods ..before we get into that ,we just have to note that the pixel(coordinate) convention ,as canvas is a '2d' grid ,the upper left corner is (0,0) ==> (x,y).

and as we move to the right x coordinate increases , if we go down y coordinate increases.

       For drawing a line we first go to the point where we want to start the line and from that position we draw a line to the end point.So we need two points.

We do that using different methods( ) 

• beginPath( ) - declareswhere we are about to draw the new path
• moveTo( ) - it positions the context point
• lineTo( ) - it draws a straight line from starting point to ending point
• stroke( ) - to fill the outline of the path.(by default stroke =0 )

Read More

HTML5 Canvas Basics Part - 2

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>

Read More

HTML5 Graphics : Canvas Basics Part - I

   
     We are hearing more about HTML 5 now-a-days. It is the future of web development. Even though it is still in progress it is supported by many browsers such as Chrome, Firefox, Opera, Safari, IE (current versions).

HTML 5 logo by W3C

What exactly is it ? What's so special about that?

 HTML 5 will be the new standard  for HTML.It has many interesting features which will make our work more easier and better.

Some of those are:

Read More

HTML5 Canvas + Javascript

Read More