Canvas element is a rectangular piece of webspace where you can control the action of each and every pixel according to your wish.
Lets start with the canvas template which we gonna use whenever we are drawing a canvas element :-
To draw a line, we have moveTo, lineTO and stroke methods.moveTo() method creates a new subpath for the given point. It acts as a way to position your drawing cursor.
lineTo() drraws a line from context point to given point.
Stroke() assigns a color to the line , so that it become visible to us.Lets see a demo and then we will explain the code .
context.moveTo(100, 150); context.lineTo(350, 50); context.lineWidth = 10; context.strokeStyle = 'orange'; context.stroke();
For understanding the arguments passed to the functions, its necessary to understand the coordinate system of our canvas. It starts with (0,0) at the topmost left corner and increases to (x,0) to the topmost right corrner. On descending down the second coordinate y increases. Coming back to the code, moveTo says the cursor to go to point with coordinates (100,150). lineTo then asks it to draw a line till (350,50). lineWidth property sets the width of the line drawn between the two points. To set the color of the line, we fix the strokeStyle, which has been fixed to orange here.
Lets see how we can make lines with a cap at the end. lineCap property is used for setting that. We can set the lineCAp value to either of butt, round or square, whichs brings us following three results.
Hence, by using the lineCap value to our lines, we can modify the ends of our lines. Silly point to be noted is that while using round or square lineCap, length of the line increases by the width of the line set. Half of the width is added to both the sides of line. So, our 2nd and 3rd line shown above are more wider by 20px.
var canvas1 = document.getElementById("myCanvas1"); var context1 = canvas1.getContext("2d"); context1.beginPath(); context1.moveTo(10, 10); context1.lineTo(400, 10); context1.lineWidth = 15; context1.lineCap = "butt"; context1.strokeStyle = 'orange'; context1.stroke(); context1.beginPath(); context1.moveTo(10, 50); context1.lineTo(400, 50); context1.lineWidth = 15; context1.lineCap = "round"; context1.strokeStyle = 'orange'; context1.stroke(); context1.beginPath(); context1.moveTo(10, 90); context1.lineTo(400, 90); context1.lineWidth = 15; context1.lineCap = "square"; context1.strokeStyle = 'orange'; context1.stroke();
beginPath() asks the cursor to start a new canvas formation. It looses all the previous coordinates when it is called by this method. Rest every line is similar to the code used above.
Once we are done with drawing a line on the canvas , lets try to draw an arc on the canvas. This is as easy as drawing a line. So, lets proceed to arc drawing :-