0

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
Kim Østergaard
  • 1
  • 1
  • 1
  • Take a look [HERE](http://flowplayer.org/demos/skinning/canvas-background.html). – Andrea Turri Mar 13 '12 at 16:40
  • Strongly related (but not exact dups): http://stackoverflow.com/a/5600671/405017 and http://stackoverflow.com/questions/4858187/save-restore-background-area-of-html5-canvas – Phrogz Mar 13 '12 at 18:44

1 Answers1

0

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.
Phrogz
  • 296,393
  • 112
  • 651
  • 745