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 )

                                                       

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".