Jump to content

Drawing app


Maril
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...