更改HTML5画布中的背景图像

Question

I need to change background image in HTML5 canvas.

I want to use 2 different thumbnails as buttons and when I click on one of the images the background should be change to that particular image.

Answer 1

Technique 1

1. On click of the appropriate buttons set a unique CSS class on your <canvas> element.
2. Use CSS to apply a background image to your canvas.

Drawing commands and erasing your canvas will not affect the CSS-applied background image behind your content.

Technique 2

1. Write a redraw() function that knows how to erase the canvas and regenerate your drawing, including determining what image to draw as the background first.
2. On click of the buttons set a variable and re-invoke your redraw() function. It will erase your canvas and use the variable to draw the correct image.