title: Which is faster -- stacking canvases or pixel manipulation?
body: <p>I'm making a little Tetris clone using some of the HTML 5 features, and I've come to a bit of a dilemma.</p>
  
  <p>My tetrominos aren't composed of blocks -- they have shading and shadows that depend on the rotation and thus each is its own image.  Which means I can't use the normal "redraw everything" every time the game state changes, because that would mean keeping track of all the piece drop history and "replaying" it whenever I want to clear a line.</p>
  
  <p>So my options are:</p>
  
  <p>1) Create two canvas elements stacked upon each other.  The one on the back is the "board" image.  The one on top is the pieces canvas, where I can slice and rearrange things easily.  This feels very hackish though, as I wanted to keep everything in one canvas element.</p>
  
  <p>2) Create a "drawing" context and a "buffer" context.  In the buffer context, I have all of the pieces and can manipulate it freely, and when it's time to draw the buffer to the screen, I getImageData, loop through all of the pixels, and composite them onto the board image.  I then write this into the "drawing" context with putImageData.  This hassle occurs because I can't find a way to take an ImageData structure and composite it onto a canvas element (you can do that with ImageElements using drawImage, but drawImage won't take an ImageData structure).</p>
  
  <p>Neither solution seems very elegant to me.</p>
  
  <p>Thanks</p>