Drawing Lines
For drawing straight lines we use the lineTo method.
lineTo(x, y);
This method takes two arguments – x and y, – which are the coordinates of the line’s end point. The starting point is dependent on previous drawn paths, where the end point of the previous path is the starting point for the following, etc.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas tutorial</title>
<script>
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.lineTo(25, 105);
ctx.closePath(); // for completing triangle
ctx.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="200">
</canvas>
</body>
</html>
