What is the best way to overlay a canvas on an image?

I would like to place the canvas on top of the image that I have on the page. The canvas will be the exact size of the image.

However, the following conditions must be met:

• The canvas should remain exactly on top of the image at any time. Therefore, using absolute positioning will not work, because if the content is pasted over the image, it moves the image down without moving the canvas.
• Image can be resized from its original size. Therefore, replacing the image with a canvas and setting its background to the image will not work.

What are my options?