Here are the 5 quick steps to draw a line in HTML5 using <canvas> tag.
Step 1: Add the canvas tag in HTML page
<canvas id="Canvas1" width="200" height="200" style="border:1px solid black;">
To learn more about why I have assigned height and width and border, read this first article in the canvas series HERE.
Step 2: Get the canvas tag in JavaScript using getElementById
var canvas = document.getElementById("Canvas1");
Step 3: Create a drawing object using getContext method
var canvasObject = canvas.getContext("2d");
Again, if you want to understand why I have passed the value "2d", read this first article in the canvas series HERE.
Step 4: Specify the starting and ending point for the line using moveTo and lineTo methods.
canvasObject.moveTo(0,0);
canvasObject.lineTo(200,200);
Step 5: Draw the line using stroke method.
canvasObject.stroke();
canvas drawing html tags