[whatwg] Canvas isPointInPath() coordinate space

On Jul 14, 2010, at 10:58 PM, David Flanagan wrote:

> Here's another coordinate-space related question.
> 
> I assume that the intended purpose of isPointInPath() is hit testing. You get a click event on a canvas element, extract the mouse coordinates from the event object, subtract the canvas position from them, and pass them to isPointInPath() to figure out what part of your drawing the user has clicked on.
> 
> My question has to do with this paragraph from the spec:
> 
>> The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
> 
> and this one:
> 
>> The isPointInPath(x, y) method must return true if the point given by the x and y coordinates passed to the method, when treated as coordinates in the canvas coordinate space unaffected by the current transformation...
> 
> So suppose I'm using this canvas tag:
> 
> <canvas width=100 height=100 style="width:200px; height:200px"></canvas>
> 
> If I understand the first quoted paragraph above correctly, this canvas will have 2 on-screen CSS pixels per coordinate space unit.
> 
> So here's my question: if I want to do hit-testing as described above, do I need to take the mouse coordinates from the event, subtract the offset of the canvas, and then divide by 2?  As the spec is written, I think I do have to do that division manually.  Is that what is intended?  What if the user has zoomed in?  Is it even possible to use isPointInPath() correctly in that case?

isPointInPath works in the context of the canvas -- if you have coordinates from an event you will need to transform those from screen coordinates to the base coordinate space used by the canvas.  In other words:
1. adjust for the offset of the canvas element relative to the event coordinate space
2. adjust for the scale factor between the canvas element and the canvas element's context

It may help if you think of the canvas in two parts, the element, and the context.

The size and position of the element are effected by CSS.

The size of the context (in CSS pixels) is determined by the width and height attributes.  The context is completely unaware of CSS, or its position in the page content, and can't be made to be as there's no requirement that a canvas actually be in a document and therefore no guarantee that there are any style rules available to use to determine anything else.

If the user has zoomed in the browser has to ensure that you can get consistent behaviour -- either by scaling the event coordinates before it reaches you, or by scaling the CSS so that if you request computedStyle you get the correct size.

--Oliver

> 
> 	David

Received on Wednesday, 14 July 2010 23:27:29 UTC