title: Why is my canvas not clearing correctly?
body: <p>I'm currently working on a little experimental project with HTML5 Canvas.</p>
  
  <p>Basically, at the moment i'm just trying to make the canvas clear as expected. The only thing that my code does as the moment is generate a lines that are broken in the middle. However, at the moment i'm trying to make one line, and then remove that line and add another line at another different position without showing the first line.</p>
  
  <p>I would of thought that this code would work:</p>
  
  <pre><code>poles(20); // this number is the x position at which the line (pole) will be generated
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  poles(140)
  </code></pre>
  
  <p>In all technically, this should show only the second pole because the canvas should have been cleared after the first pole was generated. But hit still shows both.</p>
  
  <p>When I tried only:</p>
  
  <pre><code>poles(20);
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  </code></pre>
  
  <p>The canvas was blank which told me that the clearing worked correctly.</p>
  
  <p>I tried one more thing:</p>
  
  <pre><code>poles(20);
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  setTimeout(function () {
      poles(140)
  }, 1000);
  </code></pre>
  
  <p>In this case, both poles did show up but not until after 1 second which told me that the <code>poles</code> function is causing both to be generated again even though the function doesn't loop:</p>
  
  <pre><code>function poles(x) {
      var bottomH = getRandomInt(20, 180)
      // using seperate rectangles will make a break
      rect(40, 220 - bottomH, x, 0); // first section of line
      rect(40, bottomH, x, HEIGHT - bottomH); // second section of line        
  }
  </code></pre>
  
  <p>I hope someone can explain to me how come my <code>poles</code> function is cause both of the poles to reappear.</p>
  
  <p>You can view the example <a href="http://jsfiddle.net/shawn31313/zswr6hww/4/show/" rel="nofollow">here</a>.
  For Reference, the main code is:</p>
  
  <pre><code>var canvas = document.getElementById("canvas"),
      WIDTH = canvas.width,
      HEIGHT = canvas.height;
  var ctx = canvas.getContext("2d");
  
  function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  function rect(w, h, x, y) {
      ctx.rect(x, y, w, h);
      ctx.fill();
  }
  
  function poles(x) {
      var bottomH = getRandomInt(20, 180); // determine where the line break will be
      rect(40, 220 - bottomH, x, 0);
      rect(40, bottomH, x, HEIGHT - bottomH);
  }
  
  poles(20);
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  setTimeout(function () {
      poles(140)
  }, 1000);
  </code></pre>