5 Steps to Create a Line using Canvas Tag in HTML5

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();

Share this post