ok, basically it takes an image, converts it to a canvas, saves that canvas data, detects the edges of the image in the canvas, outlines the edges in black-and-white, saves that black-and-white canvas data, too, adds an event handler that onmousemove (iPad: ontouchmove) substitutes a circular region of the "outlined edges canvas data" with the "original image" canvas data - puuhh - that's all. hope you like it.
hi, u r right - not really performant in FF, developed/tested it on chrome, safari and iPad safari (which my kids love, it's mostly coded for them) so far .. will look into FF and make some performance enhancements.
i commented out a
console.log(touch.pageX);
and now the performance in FF seems to be much more smoother? can it be? it did not even get executed? strange.
after a long hard fight i made it faster (overall but especially in FF) .... the CanvasPixelArray Object (which is not an Array in Webkit ....) is a real bastard.
hi, i started of here http://developer.apple.com/safaridemos/CanvasPixelManipulati... (look into the sourecode) but tuned the internal edge detection parameters to work better with children book covers. said that, i came across a lot of ... potential within these algorithms to make them way cooler. will probably work on them during another rainy weekend.
1. BW (inited from Color)
2. Color (color source image)
3. Paint (inited transparent)
4. Temp (inited transparent)
Each mouse move:
1. Draw an opaque white line on Paint to the new position
2. Copy Paint to Temp
3. Set the globalCompositeOperation to "source-in"
4. Draw Color to Temp
5. Set the globalCompositeOperation to "source-over"
6. Draw Temp to BW
I haven't tried it, but I think it should work (or something like it with the flaws corrected :) ). One advantage is that you can use the path line drawing primitives on the canvas instead of rolling your own.
You could also optimize a bit by only drawing the portions of the canvases that have been changed, but it really should be plenty fast as-is.
Is any basic piece of interactivity done in canvas/html5/something-not-flash worthy of an upvote?!? Do we have to go through seeing every bit of graphics code anyone ever ran on an Apple II get ported to HTML5?
21 comments
[ 2.9 ms ] story [ 50.3 ms ] threadGreat idea though. How do you do the edge detection? Sounds like a neat feature.
Edge detection is easy, especially on images with small numbers of colors in large swaths.
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-p...
Four canvases:
1. BW (inited from Color) 2. Color (color source image) 3. Paint (inited transparent) 4. Temp (inited transparent)
Each mouse move:
1. Draw an opaque white line on Paint to the new position 2. Copy Paint to Temp 3. Set the globalCompositeOperation to "source-in" 4. Draw Color to Temp 5. Set the globalCompositeOperation to "source-over" 6. Draw Temp to BW
I haven't tried it, but I think it should work (or something like it with the flaws corrected :) ). One advantage is that you can use the path line drawing primitives on the canvas instead of rolling your own.
You could also optimize a bit by only drawing the portions of the canvases that have been changed, but it really should be plenty fast as-is.
http://beej.us/x/scratcher/
(In that demo, the B&W image is pre-made--I don't do your cool in-canvas edge detection, but the drawing stuff should still apply.)