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

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 change CSS with JavaScript?CSSHow to redirect or load a new document using JavaScript?JavaScript@forward modules with a prefix in SCSS (Sass)SCSSWhat’s a page re-rendering in React?ReactWhat is Prototypal Inheritance in JavaScript?JavaScriptLearn to Make a Simple Contact Us Form using PHP and PDO-MySQLPHPControl Scrolling with CSS Scroll SnapCSSHow does @extend rule work in SCSS (Sass)?SCSSHow to add a new role in WordPress?WordPressCheck if any column has NULL values in PostgresPostgresHow to Make CSS Lists Bullets Smaller?CSSSelf-Driving and Intelligent NetworksMiscellaneous