title: HTML5 Context/Canvas - when to call draw on the context
body: <p>I'm writing a little object oriented style javasscript demo -- just to draw a bunch of balls moving around the screen.  nothing fancy, no collision detection or anything at this point. Consider it safe to assume my Ball.js class is good.</p>
  
  <p>My question amounts to this:  Where should I call ball.draw(context) ?  The only way to get balls drawn to the screen the way I set it up seems to be by placing the call in generateBalls().  But that means each ball is just drawn once.  </p>
  
  <p>So I'd really appreaciate it if someone could point out the error of my ways here.  This isn't homework - just trying to get a better handle on javascript and canvas.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script src="ball.js"&gt;&lt;/script&gt;
  &lt;script src="utils.js"&gt;&lt;/script&gt;
  ...
      &lt;canvas id="canvas" width="600" height="480"&gt;&lt;/canvas&gt;
      &lt;script type="text/javascript"&gt;
          window.addEventListener('load', eventWindowLoaded, false);
  
          function eventWindowLoaded() {
              canvasApp();    
          }
  
          function canvasSupport() {
              return true;    
          }
  
          function canvasApp() {
              if(!canvasSupport()) {
                  return; 
              }
          }
          console.log("app entered");
          var numBalls = 45;
          //var numBalls = demo.numberofballs.value;
          var maxSize = 8;
          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 tempXunits;
          var tempYunits;
  
          canvas = document.getElementById("canvas");
          context = canvas.getContext("2d");
  
          generateBalls();
  
          setInterval(drawScreen, 33);
  
          function generateBalls() {
              console.log("Make some balls");
              for(var index = 0; index &lt; numBalls; index++) {
                  var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
                  var ball = new Ball(tempRadius, "#000000"); 
                  ball.x = tempRadius * 2 + (Math.floor(Math.random()*canvas.width) -  tempRadius * 2);
                  ball.y = tempRadius * 2 + (Math.floor(Math.random()*canvas.height) - tempRadius * 2);
                  ball.speed = maxSpeed - tempRadius;
                  ball.angle = Math.floor(Math.random()*360);
                  ball.dx = Math.cos(tempRadians) * tempSpeed;
                  ball.dy = Math.sin(tempRadians) * tempSpeed;
                  // here outputted balls but a stupid place to put it LOL
                  balls.push(ball);
  
  
  
              }
  
          }
  
          function drawScreen() {
              console.log("draw screen");
  
  
  
              // loop through all balls and adjust their position
              // a BallManager could do this more cleanly
              for(var index = 0; index &lt; balls.length; index++) {
  
                  context.fillStyle="#EE00EE";
                  context.fillRect(0,0,canvas.width, canvas.height);
  
                  // Box
                  context.strokeStyle = "#ff0043";
                  context.strokeRect(1,1,canvas.width-2, canvas.height-2);
  
                  // place balls
                  context.fillStyle = "#ff8783";
                  console.log("ball mover loop in drawscreen");
                  // no var ball now
  
                  ball = balls[index];
                  ball.x += ball.dx;
                  ball.y += ball.dy;
                  ball.draw(context);
                  //checkBoundaries(balls[index]);
                  if(ball.x &gt; canvas.width || ball.x &lt; 0) {
                  ball.angle = 180 - ball.angle;
                  updateBall(ball);   
                      } else if(ball.y &gt; canvas.height || ball.y &lt; 0) {
                          ball.angle = 360 - ball.angle;
                          updateBall(ball);   
                          //ball.draw(context);
                  }
  
              }
  
          }   
  
          //function checkBoundaries(ball) {
              //console.log("Check Bounds: " + " " + "ball.x: " + ball.x + " " + //"ball.y: " + ball.y);
  
          //}
  
          function updateBall(ball) {
              ball.radians = ball.angle * Math.PI / 180;
              ball.dx = Math.cos(ball.radians) * ball.speed;
              ball.dy = Math.sin(ball.radians) * ball.speed;
              //ball.draw(context);
          }
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you for your advice,
  Marc</p>