HTML canvas trace

Question

I am trying to create something in HTML5 / Canvas to allow tracing over the image and alert if deviation from the predefined path.

I figured out how to load an external image into the canvas, and let the mousedown / mousemovement events draw an image above it, but the fact that I am having trouble displaying the head compares the two.

Images are all plain black on white paths, so from what I can tell, a getPixel-style event can determine if there is black under it, where it was drawn or under which the mouse is.

I could do this with just the mouse position, but this would require determining the paths of each image outline (and there is a fair number, therefore, ideally wanting to do this by analyzing the main image).

I was told that this is possible using Flash, but I would like to avoid it, if possible, in order to maintain compatibility with non-flash platforms (namely ipad), since they are the main goal for launching the page.

Any insight or help would be appreciated!

Answer 1

I think you have already touched on the most straightforward approach to solving this issue.

- , mousemove , , . left-mouse , , . - , , . - 9x9 pixels, , . , , odd , .

, getImageData() . : getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size), . , , - , , .

, , , , , ( ). .

. , (.. point-in-path ), . point-in-path, , .

---

: , , getPixel(), WebGL . WebGL , , , , . , WebGL, , 2D- ( , ).