JavaScript Canvas - Basic Paths
Written by Ian Elliot   
Monday, 02 December 2019
Article Index
JavaScript Canvas - Basic Paths
Default Path
More Arcs

Paths are the basic way to create a drawing using Canvas. In this extract from a chapter in my new book on JavaScript Graphics we look at the fundamentals of paths.

 

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

largecover360

 

Contents

  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: JavaScript Canvas - Basic Paths **NEW!
  4. Stroke and Fill
  5. Transformations
  6. Text
      Extract: Text, Typography & SVG 
  7. Clipping, Compositing and Effects
  8. Generating Bitmaps
  9. WebWorkers & OffscreenCanvas
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
  13. Image Processing
      Extract: ImageData 
  14. 3D WebGL
  15. 2D WebGL

Related Articles

Reading A BMP File In JavaScript

Getting Started With SVG

SVG, JavaScript and the DOM

Getting Started with Box2D in JavaScript

<ASIN:1871962625>

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

Now that we have a canvas object and a drawing context it is time to find out how to draw on the bitmap. What methods you have available depends on the drawing context you selected, but the most common is the 2D context. You might be surprised to learn that this doesn’t have a huge range of drawing commands and nearly everything you want to do has to be achieved using a custom path. In fact, the only predefined shape that is available is the rectangle and we will look at this at the end of the chapter. First let’s find out about the more general idea of a path.

Paths

In general the drawing methods work by creating a path which you can then fill or stroke (draw as an outline). You can think of a path as a specification for drawing an outline which is stored in a Path object.

You can create a Path object using its constructor:

var myPath=new Path2D();

The Path object has a range of methods which are used to specify the path. Usually the first method used is the moveTo(x,y) call which sets the start of the path to the specified position i.e. x,y. Following the moveTo you can start to draw straight lines using the lineTo(x,y) method.

For example to draw a triangle you might use:

var myPath = new Path2D(); 
myPath.moveTo(50, 50); 
myPath.lineTo(100, 100); 
myPath.lineTo(0, 100); 
myPath.lineTo(50, 50);

This defines the path shown in the diagram:

 path1

You can’t see the path at the moment – it is just a set of co-ordinates and instructions to draw lines. To see the path you have to render it to the canvas object using one of the drawing context’s methods. You can use fill() to create a filled shape or stroke() to just draw the path as an outline. Fill and stroke are the subject of Chapter 4.

So to draw our path using the default stroke setting the entire program is:

var myPath = new Path2D(); 
myPath.moveTo(50, 50); 
myPath.lineTo(100, 100); 
myPath.lineTo(0, 100); 
myPath.lineTo(50, 50); 
ctx.stroke(myPath);

Once you have defined a Path object you can use it as many times as you want to draw the same shape. If you change the last line to:

ctx.fill(myPath);

the result is a triangle filled with the default fill color.

Notice that while you can use expressions in the path specification, these are worked out and stored. This means that the path always has a fixed location and shape. We will find out how to use paths at different locations in Chapter 5.

You can use additional moveTo function calls to create a disconnected path. Think of moveTo as moving a pen to a new location with the pen up and off the paper and lineTo as moving with the pen down. For example:

var myPath = new Path2D(); 
myPath.moveTo(50, 50); 
myPath.lineTo(100, 100); 
myPath.lineTo(0, 100); 
myPath.lineTo(50, 50); 
myPath.moveTo(50, 110); 
myPath.lineTo(0, 60); 
myPath.lineTo(100, 60); 
myPath.lineTo(50, 110); 
ctx.stroke(myPath);

draws two disconnected paths in the shape of a star:

 path2

 The two triangles are sub-paths of the complete path.

You can see that the need to create a line that moves back to the start of a sub-path is needed to create any closed path. The closePath function will draw a line from the current position back to the start of the current sub-path.

So we can write the star path program as:

var myPath = new Path2D();
myPath.moveTo(50, 50);
myPath.lineTo(100, 100);
myPath.lineTo(0, 100);
myPath.closePath();
myPath.moveTo(50, 110);
myPath.lineTo(0, 60);
myPath.lineTo(100, 60);
myPath.closePath();
ctx.stroke(myPath);

Notice that each closePath call closes the current sub-path. It is also very important to be clear that closePath doesn’t in any sense end the sub-path. You can carry on drawing and extend the sub-path from its initial position. For example, if you change the first sub-path to:

myPath.closePath();
myPath.lineTo(50, 0);

the sub-path continues and you get:

path3

 

That is, closePath draws a line back to the starting point of the sub-path and nothing else. To start a new sub-path you need to use a moveTo call.



Last Updated ( Monday, 02 December 2019 )