What exactly is a canvas path, and what is the use of ctx.closePath()?

Question

I'm working on an HTML5 game. I need to draw tail lines in the canvas and check for intersections in the game, which is a Tron-style game. I'm actually using the `drawLine()` function from JCanvas, but JCanvas did not provide me a way to check for line intersection, I digged in the source and found the use the `ctx` object, and at the end of the function I'm using, I returned the object so I can use the `ctx.isPointInPath()` method to achieve what I need, but is not working, is returning `false` everytime... I really don't understand what a path is - will `ctx.isPointInPath()` return `true` just for the points that are set using `ctx.moveTo()` after `ctx.beginPath()`? Or will it return `true` for all the points that are between 2 consecutive `ctx.moveTo()`s that are connected using `ctx.lineTo()`? What is the use of `ctx.closePath()`? And what is the difference between: ``` { ctx.closePath(); ctx.fill(); ctx.stroke(); } ``` and: ``` { ctx.fill(); ctx.stroke(); ctx.closePath(); } ```

Accepted Answer

What is a path?

It's a series of path commands (moveTo, lineTo, arcTo, etc.) that define the boundary of a vector shape. You can then fill and/or stroke the path as desired.

What is the Use of `closePath()`?

Demo: http://jsfiddle.net/YrQCG/5/

```
// Draw a red path using closePath() in the middle
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

// Slide the next path over by 150 pixels    
ctx.translate(150,0);

// Draw a blue path using the exact same commands, but without closePath
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
//ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();
```

Using `closePath()` causes the point of the pen to move back to the start of the current subpath, drawing a line from the current point back to that starting point; the next command starts from this new point. It's useful if you want to draw a fully outlined shape without explicitly drawing the last line.

It is equivalent to calling `lineTo()` with the location of the first point of your current subpath, followed by `moveTo()` to that same point (to establish a new subpath).

Seen above, we draw a `V` symbol using the first `moveTo` and following two `lineTo` commands. When we call `closePath` on the red path it draws the horizontal bar across and causes the next line to start from the top left corner.

When we don't call `closePath` in the blue path the next `lineTo` command continues on from the last drawn point.

Note that `closePath()` is not necessary most of the time, unlike `beginPath()` which you must call each time you want to start drawing a new path. (If you don't, all the old path drawing commands are part of the next drawing.)

What exactly is a canvas path, and what is the use of ctx.closePath()?

Solution

Problem