25

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();
}
Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Aronis Mariano
  • 2,352
  • 3
  • 22
  • 19
  • 1
    Reference: the [specification on `closePath()`](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-closepath). – Phrogz May 29 '12 at 22:11

2 Answers2

52

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

                                          enter image description here

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

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Thanks (: ... just one final question .isPointInPath() will evaluate against the last path (even if its alredy closed) ?? – Aronis Mariano May 29 '12 at 22:38
  • 1
    There is only ever one path (which may have subpaths). The method [`isPointInPath()`](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-ispointinpath) will test against the entire path (all subpaths), including whether or not `closePath()` drew a line or not. (Note that the statement _"there is only ever one path"_ applies to the context; you can, alternatively, create [`Path`](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#path-objects) objects. – Phrogz May 29 '12 at 22:41
  • 1
    @Aronis See [this demo](http://jsfiddle.net/kLZfc/3/): `isPointInPath()` does not account for stroke, but tests the equivalent filled area of the path (the yellow in that demo). The point `50,50` is directly along the edge of one of the lines, but adjacent to no filled regions. – Phrogz May 29 '12 at 22:54
  • 1
    And here's another demo showing a case where the test succeeds for a point exactly on the edge of the path, but adjacent to a non-zero fill region: http://jsfiddle.net/kLZfc/4/ – Phrogz May 29 '12 at 22:56
17

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.

closed path