title: Can't clear canvas in HTML5
body: <p>I have a couple of canvas layered in a HTML page, I want to be able to change the top layer, which shows images that the user can select.</p>
  
  <p>The problem is, whenever I call clearRect it does clear the canvas for a moment, then the previous image is loaded back.</p>
  
  <p>This is my javascript code:</p>
  
  <pre><code>window.onload = function(){
      init();
      drawAll();  
  }
  function clear(){
      ctx2.clearRect(0,0,WIDTH,HEIGHT);
  }
  
  function init() {
      city.src ="city.png";
      image2.src="image.png";
      layer1 = document.getElementById("layer1");
      ctx1 = layer1.getContext("2d");
      layer2 = document.getElementById("layer2");
      ctx2 = layer2.getContext("2d");
  }
  
  
  function drawAll() {
      draw1();
      draw2();
  }
  
  function draw2() {
      ctx2.clearRect(0,0,WIDTH,HEIGHT);
      ctx2.drawImage(image2, 240, 200);
  }
  
  function draw1() {
      ctx1.clearRect(0, 0, WIDTH, HEIGHT);
      ctx1.drawImage(city, 0, 0);
  }
  </code></pre>
  
  <p>Why is this happening? What am I missing?</p>