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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
WordPress: How to loop through a repeater field in ACF?WordPressHow to change CSS with JavaScript?CSSHow to add a Line Chart in Angular App?AngularHow to use Context in React?ReactDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSWordPress: How to print ACF array field values?WordPressHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLAmpersand (Parent Selector) in SCSS (Sass)SCSSSequence generator (range) using JavaScript Array.from()JavaScriptOpen Source Security Tools for Defense SecurityMiscellaneousSlider animation using CSS transform propertyCSSA list of wp-cli commands to use via SSHWordPress