title: How to refresh a Canvas on a HTML bag?
body: <p>I have this javascript program that draws a hundred circles on the screen and they can bounce around in the canvas on themselves. Currently I draw an empty rectangle over them to erase next generation of them. But is there a better way to erase and refresh a Canvas on a HTML page.</p>
  
  <p>Code:</p>
  
  <pre><code>    function  drawScreen () {
      context.fillStyle = '#EEEEEE';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#000000'; 
      context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);
  
      update();
      testWalls();
      collide();
      render();
  }
  </code></pre>
  
  <p>Here is all of the code if you want to try it:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;CH5EX7: Balls With Simple Interactions&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  window.addEventListener('load', eventWindowLoaded, false);  
  function eventWindowLoaded() {
      canvasApp();
  }
  
  function canvasApp() {
      var numBalls = 200 ;
      var maxSize = 15;
      var minSize = 5;
      var maxSpeed = maxSize+5;
      var balls = new Array();
      var tempBall;
      var tempX;
      var tempY;
      var tempSpeed;
      var tempAngle;
      var tempRadius;
      var tempRadians;
      var tempvelocityx;
      var tempvelocityy;
  
      function  drawScreen () {
          context.fillStyle = '#EEEEEE';
          context.fillRect(0, 0, theCanvas.width, theCanvas.height);
          //Box
          context.strokeStyle = '#000000'; 
          context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);
  
          update();
          testWalls();
          collide();
          render();
      }
  
      function update() {
          var ball;
          for (var i =0; i &lt;balls.length; i++) {
              ball = balls[i];
              ball.nextx = (ball.x += ball.velocityx);
              ball.nexty = (ball.y += ball.velocityy);
          }
      }
  
      function testWalls() {
          var ball;
          var testBall;
  
          for (var i =0; i &lt;balls.length; i++) {
              ball = balls[i];
  
              if (ball.nextx+ball.radius &gt; theCanvas.width) {
                  ball.velocityx = ball.velocityx*-1;
                  ball.nextx = theCanvas.width - ball.radius;
  
              } else if (ball.nextx-ball.radius &lt; 0 ) {
                  ball.velocityx = ball.velocityx*-1;
                  ball.nextx =  ball.radius;
  
              } else if (ball.nexty+ball.radius &gt; theCanvas.height ) {
                  ball.velocityy = ball.velocityy*-1;
                  ball.nexty = theCanvas.height - ball.radius;
  
              } else if(ball.nexty-ball.radius &lt; 0) {
                  ball.velocityy = ball.velocityy*-1;
                  ball.nexty =  ball.radius;
              }
          }
      }
  
      function render() {
          var ball;
          context.fillStyle = "#000000";
          for (var i =0; i &lt;balls.length; i++) {
              ball = balls[i];
              ball.x = ball.nextx;
              ball.y = ball.nexty;
  
              context.beginPath();
              context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
              context.closePath();
              context.fill();
          }
      }
  
      function collide() {
          var ball;
          var testBall;
          for (var i =0; i &lt;balls.length; i++) {
              ball = balls[i];
              for (var j = i+1; j &lt; balls.length; j++) {
                  testBall = balls[j];
                  if (hitTestCircle(ball,testBall)) {
                      collideBalls(ball,testBall);
                   }
              }
          }
      }
  
      function hitTestCircle(ball1,ball2) {
          var retval = false;
          var dx = ball1.nextx - ball2.nextx;
          var dy = ball1.nexty - ball2.nexty;
          var distance = (dx * dx + dy * dy);
          if (distance &lt;= (ball1.radius + ball2.radius) * (ball1.radius + ball2.radius) ) {
                retval = true;
          }
          return retval;
      }
  
      function collideBalls(ball1,ball2) {
          var dx = ball1.nextx - ball2.nextx;
          var dy = ball1.nexty - ball2.nexty;
  
          var collisionAngle = Math.atan2(dy, dx);
  
          var speed1 = Math.sqrt(ball1.velocityx * ball1.velocityx + ball1.velocityy * ball1.velocityy);
          var speed2 = Math.sqrt(ball2.velocityx * ball2.velocityx + ball2.velocityy * ball2.velocityy);
  
          var direction1 = Math.atan2(ball1.velocityy, ball1.velocityx);
          var direction2 = Math.atan2(ball2.velocityy, ball2.velocityx);
  
          var velocityx_1 = speed1 * Math.cos(direction1 - collisionAngle);
          var velocityy_1 = speed1 * Math.sin(direction1 - collisionAngle);
          var velocityx_2 = speed2 * Math.cos(direction2 - collisionAngle);
          var velocityy_2 = speed2 * Math.sin(direction2 - collisionAngle);
  
          var final_velocityx_1 = ((ball1.mass - ball2.mass) * velocityx_1 + (ball2.mass + ball2.mass) * velocityx_2)/(ball1.mass + ball2.mass);
          var final_velocityx_2 = ((ball1.mass + ball1.mass) * velocityx_1 + (ball2.mass - ball1.mass) * velocityx_2)/(ball1.mass + ball2.mass);
  
          var final_velocityy_1 = velocityy_1;
          var final_velocityy_2 = velocityy_2;
  
          ball1.velocityx = Math.cos(collisionAngle) * final_velocityx_1 + Math.cos(collisionAngle + Math.PI/2) * final_velocityy_1;
          ball1.velocityy = Math.sin(collisionAngle) * final_velocityx_1 + Math.sin(collisionAngle + Math.PI/2) * final_velocityy_1;
          ball2.velocityx = Math.cos(collisionAngle) * final_velocityx_2 + Math.cos(collisionAngle + Math.PI/2) * final_velocityy_2;
          ball2.velocityy = Math.sin(collisionAngle) * final_velocityx_2 + Math.sin(collisionAngle + Math.PI/2) * final_velocityy_2;
  
          ball1.nextx = (ball1.nextx += ball1.velocityx);
          ball1.nexty = (ball1.nexty += ball1.velocityy);
          ball2.nextx = (ball2.nextx += ball2.velocityx);
          ball2.nexty = (ball2.nexty += ball2.velocityy);
      }
  
      theCanvas = document.getElementById('canvasOne');
      context = theCanvas.getContext('2d');
  
      for (var i = 0; i &lt; numBalls; i++) {
          tempRadius = 5;
          var placeOK = false;
          while (!placeOK) {
              tempX = tempRadius*3 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*3);
              tempY = tempRadius*3 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*3);
              tempSpeed = 4;
              tempAngle =  Math.floor(Math.random()*360);
              tempRadians = tempAngle * Math.PI/ 180;
              tempvelocityx = Math.cos(tempRadians) * tempSpeed;
              tempvelocityy = Math.sin(tempRadians) * tempSpeed;
  
              tempBall = {x:tempX,y:tempY, nextX: tempX, nextY: tempY, radius:tempRadius, speed:tempSpeed, angle:tempAngle, velocityx:tempvelocityx, velocityy:tempvelocityy, mass:tempRadius};
              placeOK = canStartHere(tempBall);
          }
          balls.push(tempBall);
      }
  
      function canStartHere(ball) {
          var retval = true;
          for (var i =0; i &lt;balls.length; i++) {
              if (hitTestCircle(ball, balls[i])) {
                  retval = false;
              }
          }
          return retval;
      }
     function gameLoop() {
              window.setTimeout(gameLoop, 20);
              drawScreen()    
          }
  
      gameLoop();
  
  
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt; 
  &lt;div style="position: absolute; top: 50px; left: 50px;"&gt;
  
  &lt;canvas id="canvasOne" width="500" height="500"&gt;
   Your browser does not support the HTML 5 Canvas. 
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have placed the newest working code here in case someone is looking at this post as a reference down the road. The clear the canvas is down differently and works very well.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Moving In Circle&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  window.addEventListener('load', eventWindowLoaded, false);  
  function eventWindowLoaded() {
      canvasApp();
  
  }
  
   function canvasApp() {
      var radius = 100;
      var circle = {centerX:250, centerY:250, radius:125, angle:0}
      var ball = {x:0, y:0,speed:.1};
  
      theCanvas = document.getElementById('canvasOne');
      context = theCanvas.getContext('2d');
  
      function erraseCanvas() {
          context.clearRect(0,0,theCanvas.width,theCanvas.height);
      }
  
      function drawScreen () {
          erraseCanvas();
  
          ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
          ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
          circle.angle += ball.speed;
  
          context.fillStyle = "#000000";
          context.beginPath();
              context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
          context.closePath();
          context.fill();
      }
  
      function gameLoop() {
           window.setTimeout(gameLoop, 20);
           drawScreen()   
      }
  
      gameLoop();
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;  
  &lt;div style="position: absolute; top: 50px; left: 50px;"&gt;
  
  &lt;canvas id="canvasOne" width="500" height="500"&gt;
   Your browser does not support the HTML 5 Canvas. 
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>