title: clearRect not working
body: <p>I'm doing a Pong game in javascript in order to learn making games, and I want to make it object oriented.</p>
  
  <p>I can't get <code>clearRect</code> to work. All it does is draw a line that grows longer.
  Here is the relevant code:</p>
  
  <pre><code>function Ball(){
      this.radius = 5;
      this.Y = 20;
      this.X = 25;
      this.draw = function() {
          ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
          ctx.fillStyle = '#00ff00';
          ctx.fill();
      };
  }
  
  var ball = new Ball();
  
  function draw(){
      player.draw();
      ball.draw();
  }
  
  function update(){
      ctx.clearRect(0, 0, 800, 400);
      draw();
      ball.X++;
  }
  </code></pre>
  
  <p>I've tried to put the <code>ctx.clearRect</code> part in the <code>draw()</code> and <code>ball.draw()</code> functions and it doesn't work.
  I also tried <code>fillRect</code> with white but it gives the same results. 
  How can I fix this?</p>