Question

I’m trying to create a colouring book app using HTML5 and Javascript. I’m trying to load dynamic png images onto the Canvas and draw strokes underneath. But it doesn’t seem to be working…

I also tried using layered canvases but it doesn’t seem to work either. Is there a way to layer the stroke under the image?

Answer 1

If your png image has transparent areas (where the user strokes are supposed to be drawn) you could try:

1. First draw the whole image over canvas.
2. Process users strokes normally (detect mousedown, mousemove, etc…) but keeping track of “modified areas” (i.e. the rectangle between first and last click)
3. When every stroke finishes, draw again the canva’s area that has just changed (the previous rectangle), so the user’s strokes will keep visible throw the transparent areas of the png image.

This way, the user can draw but keeping the original png image (a pencil drawing, for example) over the user’s strokes (the filling color).

EDIT:
A better idea may be using two canvas/layers: the first one (above) will have the original png images (with its transparent areas). When the user clicks there you can draw the strokes in the second canvas (below), so your png will be over all time, without the additional work of repaint on every stroke. Also it will make easy to implement an “erase” tool.

of course, you will need to merge both canvases before save to disk, download of print.