title: Javascript Canvas one item flickering
body: <p>I am trying to make to objects move towards each other in Canvas, when they meet and overlap one should then disappear and the other should fall down. Now I got the animation to do that, but one of the items is flickering.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  canvas{border:#666 3px solid;}
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body onload="draw(530,15); draw1(1,15);"&gt;
  &lt;canvas id="canvas" width="600" height="400"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  function draw(x,y){
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.save();
      ctx.clearRect(x, y, 600, 400);
      ctx.fillStyle = "rgba(0,200,0,1)";
      ctx.fillRect (x, y, 70, 50);
      ctx.restore(); 
      x -= 0.5;
   if(x==300)
   {
      return;
   };
      var loopTimer = setTimeout('draw('+x+','+y+')',5);
   };
   
   function draw1(w,e){
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.save();
      ctx.clearRect(w-1,e-2,600,400);
      ctx.fillStyle = "rgba(0,200,0,1)";
      ctx.fillRect (w, e, 70, 50);
      ctx.restore(); 
      w += 1;
   if(w==265)
   {
   w -= 1;
   e +=2;
   };
      var loopTimer = setTimeout('draw1('+w+','+e+')',10);
  };
  &lt;/script&gt;
  &lt;/body&gt;  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Been trying for two days, but can't seem to fix it properly. Thanks in advance.</p>