Drawing app

[Maril]

Hello

 

I've been scratching my head about this for the past few days... how do you make an HTML5 drawing app with decent performance?

 

I want the user (likely to be a child) to draw with their fingers. But - and this is the challenging bit - since the original drawing is made of areas that you can fill with different colors, I want to NOT draw outside of the area where the touchStart event happened. So you can only draw on one area at a time.

 

I think I should be using context.getImageData() and context.putImageData(), but I am not sure how to proceed.

 

Any ideas anyone?

 

Thanks

[ericjbasti]

Have you thought about creating a clipping mask for the area that the user touches? If the original drawing or outline is made up of vectors you could Clip based on that vector. This would allow the user to draw anywhere but only show the work that happens in that path. Using getImageData is going to be really slow compared to a clipping mask, and much harder to check. Hardest thing you'll run into with the clip method is ordering your calls so things render as expected. You might even consider using 2 canvases, one for the previous state and another just for the clipping mask and the active drawing.

[Maril]

Thanks for the suggestion. I hadn't thought about doing it that way.

 

I've had a quick look on google, but it seems to me that it would be incredibly complicated to use this approach for non-convex shapes? That is, determining if a point is inside a (vector-based) shape that is concave... it may be just too much maths for me

 

Convex should be easy enough though, maybe I'll start with convex shapes only and I'll see what I can do. Unfortunately this rules out things such as stars that are not convex.

 

I'm still hoping to find and easier way - not sure if that's possible at all.

[Maril]

OK, this just occurred to me:

 

what if I had several images, say one for each region of the drawing. Then I use them as a mask together with some interesting globalCompositeOperation to make sure that I'm only drawing onto the mask... I don't know enough about globalCompositeOperations to know exactly what to do, but it looks like this should be possible and I suspect it will eliminate the need for getImageData and putImageData.

 

Maybe someone smarter than me will know what operation I should be using?

[ericjbasti]

Alright, this isn't perfect I just wanted to throw together a couple concepts so you can see how it might work.

 

http://jsfiddle.net/ericjbasti/mz9qd5j7/1/

 

This shows you how to make a clipping mask in canvas as well as determining if the mouse is within a particular path using the builtin canvas function isPointInPath.

 

The code is rough and could really use some cleaning but it should be good enough to see whats possible.

[Maril]

Wow, this is awesome!

 

Exactly what I was looking for! Thanks so much.

 

I didn't know about isPointInPath, it makes perfect sense. I was thinking I had to do the maths myself to know if the point was inside the path or not - that would have been too hard for me. But this is so simple, just made my day

[ericjbasti]

It's going to be a decent amount of work to get it working on more complex shapes, but I'm glad this helps. I'll be interested in seeing what you end up building.