title: JavaScript HTML5 Canvas Not Showing
body: <p>I'm trying to create a simple animation using HTML5 and JavaScript. I would like to use the practices shown in my original code where the JS file and html file are separate however the animation does not seem to show up in any browser. Why?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http=equiv-"content-Type" content="text/html;charset=iso-8859-1"&gt;
      &lt;title&gt;My Animation&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="myCanvas" height="450" width="450"&gt;
          &lt;p&gt;Canvas not supported&lt;/p&gt;
      &lt;/canvas&gt;
  
      &lt;script src="myAnimation.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>myAnimation.js</strong></p>
  
  <pre><code>window.addEventListener('load', drawCircle);
  drawCircle();
  
  function drawCircle() {
    canvas = document.getElementById("myCanvas"),
    context = canvas.getcontext("2d"),
    context.clearRect(0, 0, canvas.width, canvas.height);
  
    // color in the background
    context.fillStyle = "#EEEEEE";
    context.fillRect(0, 0, canvas.width, canvas.height);
  
    // draw the circle
    context.beginPath();
  
    context.arc(225, 225, radius, 0, Math.PI * 2, false);
    context.closePath();
  
    // color in the circle
    context.fillStyle = "#006699";
    context.fill();
    requestAnimationFrame(drawCircle);
  
  }
  </code></pre>