title: When using "destination-in," only the last thing drawn seems to render
body: <p>I'm making a little library to emulate a curses-like interface in Javascript using a bitmap font. The font is a png with all the characters in it, and with a transparent background.</p>
  
  <p>The method I'm using to render a character is as follows.</p>
  
  <ol>
  <li>Draw a square over the space where the character is going to go. The square is the foreground color of the character</li>
  <li>Change <code>context.globalCompositeOperation</code> to <code>destination-in</code></li>
  <li>Draw the character over the square</li>
  </ol>
  
  <p>This is all done in a function called <code>putChar</code>. For some reason, though, only the last <code>putChar</code> call seems to render.</p>
  
  <p>In the following JSFiddle, I've removed everything from the library except what's needed to reproduce the issue. <code>putChar</code> is called in lines 56, 57, and 58. It should render a yellow "a", a green "b", and a blue "c" all in a row. But only the third <code>putChar</code> call is rendered (the blue "c".)</p>
  
  <p><a href="http://jsfiddle.net/r96Lh/3/" rel="nofollow">http://jsfiddle.net/r96Lh/3/</a></p>
  
  <p>This is my first time using composite operations, so I must be missing something. Anyone know why this might be happening?</p>