How to draw lines using html5 canvas?
We read about html5 canvas in last post, we can do lot with canvas. As today, i am going to learn how to draw lines using html5 canvas. HTML5 canvas having a lot of things to learn so we learn various small-2 things regularly.
To draw lines, canvas used 4 methods beginPath(), moveTo(), lineTo(), and stroke() methods. Lets know more about them in detail –
beginPath() – this methods reset the current path or declare a new path.
moveTo(x,y) – it creates a new sub-path with the given point.
lineTo() – it adds the given point to current subpath.
stroke() – it draws the line actually, gives the visibility to line.
Lets draw a line –
<canvas id="testCanvas" width="400" height="200" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById('testCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 150); context.lineTo(200, 50); context.stroke(); </script>
As we can see in the above example, we created an canvas and given a border, height and width to it because as we know canvas does not contain any border or content in it .
Now, lets start drawing line. First we need to find canvas by its id and call the getContext() method to draw –
var canvas = document.getElementById('testCanvas'); var context = canvas.getContext('2d');
Now, call beginPath() to declare a new path, then moveTo() to create a subpath , then lineTo() to add a new point to connect it to previous point and at last stroke() method to draw line.
context.beginPath(); context.moveTo(100, 150); context.lineTo(200, 50); context.stroke();
You can learn by changing x, y coordinates to see how these method works. The results will be look like this.