HTML5 Canvas paths, lines and polygons

Main article HTML5 Canvas

A path is a way to define a general shape which can be made up of lines and curves. A path can be used to create pretty much any shape you want.

Paths themselves aren't visible, they just provide a definition of the shape you want to draw. To make the path visible, you must fill it or stroke it, or both.

A path can also be used to define a clipping region.

You start a path using the beginPath() function.

To draw a line, you must first call moveTo() to define the start of the line, and then call lineTo() to draw the line.

This creates a simple path. We must call stroke() to actually draw the line.

context.strokeStyle = 'blue';
context.lineWidth = 4;
 
context.beginPath();
context.moveTo(100, 50);
context.lineTo(200, 50);
context.stroke();

This code draws a line from (100, 50) to (200, 50).

Notice that we also set the stroke style and line width to control how the line will look. It doesn't matter whether we do this before or after we define the path, provided we do it before we call stroke.