How to use an .png image as background in canvas html5?

Question

Hello, I would like to use an image for background in the canvas element provided by HTML5.

The thing is I don't want the drawing to modify this image, I just want it to be use as a reference or guide for the user.

For example: if I draw a background image on the canvas then I add some lines and random drawings, once I use the erase tool it will erase both the lines I've made and the background image.

How can I prevent this?

Thanx.

Answer 1

you can use CSS to position the canvas over an <img> element with your background

this is similar to the usual trick to do layered animations: just do a different <canvas> element for each layer and put one on top of the other.

non-drawn pixels of <canvas> are transparent, not white.