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();
}

Answer 1

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.)

Answer 2

This is the basic representation of closed path:

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.lineTo(100,100);
ctx.lineTo(0,100);    
ctx.closePath(); // <--the image right side has this line
ctx.stroke();

The result of closePath() is that the start and the end point will be bounded.