Question

I’m trying to build something in HTML5/Canvas to allow tracing over an image and alert if deviating from a predefined path.

I’ve figured out how to load an external image into the canvas, and allow mousedown/mousemovement events over it to draw over the image, but what I’m having trouble getting my head around is comparing the two.

Images are all simple black on white outlines, so from what I can tell a getPixel style event can tell if there is black underneath where has been drawn upon or underneath where the mouse is on.

I could do it with just the mouse position, but that would require defining the paths of every image outline (and there are a fair number, hence ideally wanting to do it by analyzing the underlying image)..

I’ve been told that its possible with Flash, but would like to avoid that if possible so that compatability with non-flash platforms (namely the ipad) can be maintained as they are the primary target for the page to run.

Any insight or assistance would be appreciated!

Answer 1

I think you already touched upon the most straight-forward approach to solving this.

Given a black and white image on a canvas, you can attach a mousemove event handler to the element to track where the cursor is. If the user is holding left-mouse down, you want to determine whether or not they are currently tracing the pre-defined path. To make things less annoying for the user, I would approach this part of the problem by sampling a small window of pixels. Something around 9x9 pixels would probably be a good size. Note that you want your window size to be odd in both dimensions so that you have a symmetric sampling in both directions.

Using the location of the cursor, call getImageData() on the canvas. Your function call would look something like this: getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size) so that you get a sample window of pixels with the center right over the cursor. From there, you could do a simple check to see if any non-white pixels are within the window, or you could be more strict and require a certain number of non-white pixels to declare the user on the path.

The key to making this work well, I think, is making sure the user doesn’t receive negative feedback when they deviate the tiniest bit from the path (unless that’s what you want). At that point you run the risk of making the user annoyed and frustrated.

Ultimately it comes down to one of two approaches. Either you load the actual vector path for the application to compare the user’s cursor to (ie. do point-in-path checks), or you sample pixel data from the image. If you don’t require the perfect accuracy of point-in-path checking, I think pixel sampling should work fine.

---

Edit: I just re-read your question and realized that, based on your reference to getPixel(), you might be using WebGL for this. The approach for WebGL would be the same, except you would of course be using different functions. I don’t think you need to require WebGL, however, as a 2D context should give you enough flexibility (unless the app is more involved than it seems).