title: Canvas in HTML5: Removing Previous Rectangle
body: <p>I've been messing around with the canvas element in html5, and this is what I've got after a bit of experimenting</p>
  
  <pre><code>function canvasMove(e) {
  
      var canvas = document.getElementById('game');
  
      if(canvas.getContext) {
          var draw = canvas.getContext('2d');
  
          draw.fillStyle = 'rgba(0,0,0,0.5)';
          draw.fillRect('10', '10', '100', '100');    
  
          var code;
  
          if (!e) var e = window.event;
          if (e.keyCode) code = e.keyCode;
          else if (e.which) code = e.which;
          var character = String.fromCharCode(code);
  
          if(character == '&amp;') { draw.translate(0, -10); }
          if(character == '(') { draw.translate(0, 10); }
          if(character == '%') { draw.translate(-10, 0); }
          if(character == "'") { draw.translate(10, 0); }
      }
  }
  </code></pre>
  
  <p>What it does is moves the rectangle whenever you press the arrow keys [Arrow keys were showing up as &amp;, (, % and ', not sure if this is the same for everyone but it's just an experiment]. Anyway, I can move the rectangle about but it leaves a sort of residue, as in it doesn't delete it's previous form, so what I get is a very basic etch-n'-sketch using a very thick brush.</p>
  
  <p>What I want to do is be able to delete the previous form of the rectangle so that only the new translated version is left.</p>
  
  <p>On top of that I'd like to know how to make it move say, horizontally, by pressing maybe left and up simultaneously. I am aware my code probably isn't very versatile, but any help us much appreciated. </p>
  
  <p>Thanks :)</p>