title: HTML5 Canvas animation not showing up
body: <p>I've been knocking my head against the keyboard trying to figure out why the animation from <a href="http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/" rel="nofollow noreferrer">this tutorial</a> is not showing up on the canvas correctly, if at all.  In chrome it draws the leftmost part of the image on the canvas, but in safari it draws nothing at all.</p>
  
  <p>I've tried different methods of delaying until the image loads, putting the script tag in various places in the html, no luck.  Debugging in chrome shows no errors.  </p>
  
  <p>The source code for the animation is not quite the same as what he presents in the tutorial, I've tried to make sense of it.  I've been at it for two days and you'll pinpoint it 30 seconds, I want to see this damn coin spin.</p>
  
  <p>spriteSheet.jpg:</p>
  
  <p><img src="https://i.stack.imgur.com/b0HwN.jpg" alt="spriteSheet.jpg"></p>
  
  <p>animation.html:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
  &lt;title&gt;Test Profile Page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;/header&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="animation.html"&gt;Animation?&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="cartoon.html"&gt;Cartoon&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;section&gt;
          &lt;img src="spriteSheet.jpg" /&gt;
          &lt;canvas id="coinAnimation"&gt;&lt;/canvas&gt;    
      &lt;/section&gt;
      &lt;footer&gt;
  
      &lt;/footer&gt;
      &lt;script src="animation.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>animation.js:</p>
  
  <pre><code>window.onload = function () {
  
  var spriteSheet = new Image();
  spriteSheet.src = "spriteSheet.jpg";
  
  //define sprite class
  
  function sprite (options) {
  
      var that = {},
          frameIndex = 0,
          tickCount = 0,
          ticksPerFrame = options.ticksPerFrame || 0,
          numberOfFrames = options.numberOfFrames || 1;
  
      that.context = options.context;
      that.width = options.width;
      that.height = options.height;
      that.image = options.image;
      that.loop = options.loop;
  
      that.update = function () {
  
          tickCount += 1;
  
          if (tickCount &gt; ticksPerFrame) {
  
            tickCount = 0;
  
            // If the current frame index is in range
            if (frameIndex &lt; numberOfFrames - 1) {    
              // Go to the next frame
              frameIndex += 1;
            } else if (that.loop) {
              frameIndex = 0;
            }
         }
      };
  
      that.render = function () {
  
        // Clear the canvas
        that.context.clearRect(0, 0, that.width, that.height);
  
        // Draw the animation
        that.context.drawImage(
          that.image,
          frameIndex * that.width / numberOfFrames,
          0,
          that.width / numberOfFrames,
          that.height,
          0,
          0,
          that.width / numberOfFrames,
          that.height);
      };
  
      return that;
  
  }
  
  var canvas = document.getElementById("coinAnimation");
  canvas.width = 100;
  canvas.height = 100;
  
  var coin = new sprite({
          context: canvas.getContext("2d"),
          width: 100,
          height: 100,
          image: spriteSheet
  });
  
  function gameLoop () {
  
    window.requestAnimationFrame(gameLoop);
  
    coin.update();
    coin.render();
  }
  
  spriteSheet.addEventListener("load", gameLoop);
  
  }
  </code></pre>