Html5 Tutorial - Future Technology

Wednesday 26 June 2013

HTML5 Tutorial - Canvas Element Lines Part - 1

Hi , I am going to explain you how to use or work with html5 new canvas element.In part one i am going to explain you about how to draw lines in canvas. Canvas Element : The canvas element is the actual DOM node that's embedded in the HTML page. Canvas Context : The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.It may be 2D or webgl(3D). 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. Template of HTML5 Canvas Element.

  
  

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods. First, we can use the beginPath() method to declare that we are about to draw a new path. Next, we can use the moveTo() method to position the context point (i.e. drawing cursor), and then use the lineTo() method to draw a straight line from the starting position to a new position. Finally, to make the line visible, we can apply a stroke to the line using stroke(). Unless otherwise specified, the stroke color is defaulted to black.

Line

Code for Above Image :


  
    
  
  
    
    
  

To Change the width of the line or increase the width of the line in the canvas , Please use the following code :

    
  
  
    
    
  
Changing canvas line color in html5 :
    
  
  
    
    
  
Html5 Line Cap Tutorial


    
    
  

No comments:

Post a Comment