Paths and lines

Learn to draw paths and lines with beginPath, moveTo, lineTo and stroke.

Drawing paths

To draw shapes other than rectangles you use a path. beginPath starts a new path. moveTo(x, y) lifts the pen to a point (moves without drawing), lineTo(x, y) draws a line to that point.

To put the line on the screen you call stroke. The path is a list of drawn segments; stroke makes that list visible.

closePath and stroke

closePath closes the path by connecting it back to the start, forming a closed shape. stroke draws the outline of the path, fill fills its inside. Without a closed path, fill does not work correctly.

For closed shapes like triangles, calling closePath automatically links the last corner to the first. You set colors with strokeStyle and fillStyle; both must be given before the drawing call.

Exercise Draw a triangle

Draw a triangle. Start the path with ctx.beginPath(), lift the pen to the first corner with ctx.moveTo(50, 10), draw two lines with ctx.lineTo(90, 80) and ctx.lineTo(10, 80), close the path with ctx.closePath() and stroke with ctx.stroke().

Show example solution

ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 80);
ctx.lineTo(10, 80);
ctx.closePath();
ctx.stroke();

Test yourself

Draw a line

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.____(100, 50);
ctx.stroke();

Show answer

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.stroke();

What does the beginPath method do?
- It immediately paints the drawing to the screen
- It deletes the previous path and clears the screen
- It sets the color
- It starts a new path
Show answer

It starts a new path — Correct! beginPath starts a new path; it clears previous path points.
Match the path methods

beginPath

start path
moveTo

lift pen
lineTo

draw line
closePath

close path

Next lesson: Drawing animation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies