Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
communitycreator

How to draw lines on canvas using JavaScript

Programming Bytes

Overview

The lineTo method is used to draw a line on the canvas. Below are the steps to draw a line on the canvas:

  • Use the beginPath() method to start a new path.
  • Use the moveTo(x,y) method to move the drawing cursor to a specific coordinate.
  • Use the lineTo(x,y) method to draw a line from the current position to the provided x and y point.
  • Use the lineWidth property to set the width of the line.
  • Use the stroke() function to add stroke to the given path.

Example

The below code demonstrates how to draw a line on the canvas:

Draw a line on the canvas

Explanation

  • Line 5: We create a canvas element.
  • Lines 7–25: We use a drawLine method that will take the drawing context, line start and end coordinate, stroke color, and line width as arguments. This method will draw a line for the given coordinate.
  • Line 26: We get the canvas element and store it in the canvas variable.
  • Line 27: We use the getContext method to get the 2D rendering context of the canvas.
  • Line 28: We call the drawLine method to draw a line from coordinate (10, 10) to coordinate (100, 100).

RELATED TAGS

javascript
communitycreator
RELATED COURSES

View all Courses

Keep Exploring