Drawing Lines on a Canvas with JavaScript

Copy Link LinkedIn Message Facebook Email X

In this lesson, you will learn how to draw lines with the CanvasRenderingContext2D API. You will discover how to create it from scratch and how to play around with sizes and colors.

A line may intuitively seem simpler than a rectangle, however, the steps to draw a line are a bit more involved than what is needed for a rectangle.

Step By Step Guide to Draw a Canvas Line

The steps you need to follow to draw a line are:

• Optional: update the strokeStyle context attribute to the color and weight of your choosing
• Start the line or path
• Move the cursor to a point
• Draw a line to another point
• Execute the drawing of the line by calling the stroke() method

In your JavaScript, seeing as pretty much everything involves using the context that was set up, you can abbreviate the variable name that you've been using so far.

// basics.js

// ...

const ctx = canvas.getContext('2d');

// ...

You're going to be drawing on top of the previous drawings that you've been working on in this module. So make sure you have a copy of the code from the previous lessons.

Here is how you might draw a line, before running this, try taking your paper or whiteboard and drawing what you think will be drawn with this:

// basics.js

// ...

ctx.strokeStyle = '#AE81DB'
ctx.beginPath()
ctx.moveTo(250,30)
ctx.lineTo(50,250)
ctx.stroke()

The path is drawn from the top-right to the top-left, the code:

• Assigns a hex string to the .strokeStyle property of the context, which will define the color of the line that you are about to draw
• Calling .beginPath() starts a new path
• .moveTo() moves the cursor to the 250, 30 point
• .lineTo() takes the 250, 30 point and makes a straight path to the 50, 250 point
• .stroke() takes the path that was created from 250, 30 to 50, 250 and outlines the path, drawing the line to the canvas

You don't have to just draw one line, you can call .moveTo() and .lineTo() multiple times to create a large selection of paths, and then call .stroke() at the end to render all of them.

This is what this code produces:

Paths are extremely powerful, the documentation for paths is well worth a quick scan to see what methods are available. When reading over documentation like this, just read through a few method names and see if any make sense just from their description. If you are curious, dig deeper into one or two, but never try to read it cover to cover!

Learn by Doing

Copy the examples from this lesson and get them working in your labs. Make a few variations, too.

If you're doing this course step-by-step, and especially if you're in the mentorship program, please be sure to push your work to GitHub when you're done.

Summary: Explore Canvas Line Drawing

• The steps to draw a line are a bit more involved than what is needed for a rectangle

Step By Step Guide to Draw a Canvas Line

• Optional: update the strokeStyle context attribute to the color and weight of your choosing
• Start the line or path
• Move the cursor to a point
• Draw a line to another point
• Execute the drawing of the line by calling the stroke() method