title: Using setTimeout() to loop, making a rectangle bigger until it hits the canvas edge and then resetting
body: <p>I'm having some issues playing with the javascript setTimeout() function. Basically I want to increase the size of a rectangle until it hits either the maximum height or width of the canvas, and then reset its width and height to 0 and keep the loop going.</p>
  
  <p>Possibly the main issue I'm having is in the if else statement, the else seems to somehow never gets called, which makes no sense to me. I've tried changing the else to an if saying if the height/width is at or over the canvas height/width to set the height/width to 0, but that didn't work either.</p>
  
  <p>Here is the code I have:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;A Canvas&lt;/title&gt;
          &lt;style&gt;
              canvas{border:20px solid black;}
          &lt;/style&gt;
  
          &lt;script&gt;
              function drawMe()
              {
                  var canvas2=document.getElementById("canvas1");
                  var ctx = canvas2.getContext("2d");             
  
                  width = 0;
                  height = 0;
  
                  draw(ctx, width, height);
              }
  
              function draw(ctx, width, height)
              {
                  ctx.beginPath();
                  ctx.fillStyle="#839402";
                  ctx.fillRect(0,0,width,height);
                  if (width &lt; 900 &amp;&amp; height &lt; 500)
                  {
                      width += 9;
                      height += 5;
                  }
                  else
                  {
                      width = 0;
                      height = 0;
                  }
                  setTimeout(function() {draw(ctx, width, height)}, 20);
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="drawMe();"&gt;
          &lt;canvas id="canvas1" width="900" height="500"&gt;
              &lt;!-- Stuff goes here --&gt;
          &lt;/canvas&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Extra info:</p>
  
  <p>The rectangle is growing properly and everything looks completely fine up until the rectangle hits the edges of the canvas. At that point, the rectangle just simply stops growing and nothing else happens. It should reset the height and width of the rectangle to 0 and restart the whole process over again in an infinite loop, but it doesn't for some reason.</p>