Question

I’m new to html5. And I’m trying to create a basic painting tool.

What I want to do in this tool is to have one or more shapes(maybe overlapping) and to paint the shapes without getting the colors overlapped. If a circle is drawn inside a rectangle and if I start coloring the circle, the rectangle should not be painted even if the mouse is dragged over it unless the dragging starts inside it.

To achieve this should I use multiple canvases or shapes?

Thanks in advance.

Answer 1

Well, first you need to program in the idea of keeping track of separate shapes. If you haven’t already done that see here for a tutorial.

I imagine your shapes will all be kept as images or in-memory canvases themselves. I’m not sure how else you can do it.

There are a million ways you could do this, here’s one:

When you start your drawing operation you need to detect which shape you’re on. Then you draw that shape to an in-memory canvas and switch that temporary canvas’ globalcompositeoperation to source-atop. This will make sure the paint can only paint in the already opaque regions of that shape (if that’s your intent here, which it seems to be).

All while you are painting you will want to update the temporary canvas and redraw the main canvas constantly. While you are redrawing the main canvas, instead of painting that shape’s image file you’ll want to paint the temporary canvas (if you use canvases to keep the shapes you can just update those in real time).

If you are not using temporary canvases for each shape, when you stop the drawing operation you are gonna have to update the image associated with the shape to complete the operation.

---

Using an in-memory canvas (not added to the DOM) for every shape (that is the size of the shape and no larger) will make coding things slightly easier and might not be that bad on performance. I’d give it a try with 100 and 1000 (or more) in-memory canvases on your targeted platforms to see though.

The alternative is to use one in-memory canvas and have an HTMLImageElement (png) that represents every shape, but using the canvas.toImageURL function can be a bit of a performance hit in itself. I’d try both methods to see which works best in your case. If the shape count is small enough, it probably doesn’t matter which.