May 08, 2013

HTML5 Canvas Basics part-3

07:12 Posted by Veera Bhadra No comments

                                           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 )
Don't forget to use stroke( ) because we can't see line without it , line is not visible as stroke is zero by default.

More stylesm to line :

  • lineWidth - to define the  width of line .
  • strokeStyle - to color the canvas line .
  • lineCap - it has three styles (square ,butt and round )
 The lineWidth property must be set before calling stroke( ).
 The strokeStyle can be set to a color string such as grey, green, red,blue, a hex value such as #000000 or #333, or an RGB value such as rgb(255,160, 0).
 Default style of line cap is "butt".



Post a Comment

Please Enter your comment here......