Yogesh Chauhan's Blog

5 Steps to Create a Line using Canvas Tag in HTML5

in HTML on October 25, 2019

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

 


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to swap images on hover using CSS?CSSEXISTS and NOT EXISTS in PostgresPostgresHow to make a UILabel clickable in Swift 5?SwiftHow to remove N/A from Radio Button list in Drupal?DrupalThe difference between 400(4xx) and 500(5xx) errorsMiscellaneousURL paths in DrupalDrupalHow to insert Bootstrap 4 in Angular 9 app?AngularA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLOverview of Drupal and how it worksDrupalContent types in DrupalDrupalHow to uninstall Cocoapods from the Mac OS?MiscellaneousGeneral concepts in DrupalDrupal