

"Magic" color pics for kids done with canvas + jquery - magichacker
http://www.barbafan.de/farbzauber/

======
magichacker
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.

~~~
callahad
Neat! You've got a bug with painting along the horizontal edges -- the brush
wraps around to the other side, Pac-Man style.

~~~
ericz
I thought it was a cool feature, a la snake games

------
alexyoung
What do you mean, for kids? I just spent 15 minutes colouring these in and
hitting refresh...

~~~
alphabeat
There are more than one?! I'm going back.

------
beej71
I have a modest proposal that might also work.

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.

~~~
magichacker
hi, thx for inputs. first i will look into > portions of the canvases that
have been changed to make it faster for FF

~~~
beej71
I did some messing around with it... source-over doesn't seem to work right
with Firefox for me. Used source-atop instead.

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

------
user24
Seems really laggy to me, Fx3.6.12/mac

Great idea though. How do you do the edge detection? Sounds like a neat
feature.

~~~
leif
Laggy here too. Same FF build, on ubuntu. Fast in chromium. Sidenote, does
anyone know of a good JS profiler?

Edge detection is easy, especially on images with small numbers of colors in
large swaths.

~~~
magichacker
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.

~~~
magichacker
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.

~~~
leif
It's now fast for a few seconds, then gets slow shortly after the footer
loads.

~~~
magichacker
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.

------
betageek
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?

~~~
davethewave
amen - and it's slower than a apple II

------
tholmes
It starts to lag up really badly if you go over the top edge.

