title: Image Preloading Canvas in Chrome
body: <p>I have, to the best of my knowledge, preloaded all of my images successfully. In FireFox, everything renders just fine, but it refuses to show up in Chrome. I've already run into other random quirks with the webkit browsers, and I assume this is just one of them. Here's the applicable code (I apologize for the length, just being verbose. Most of it is quite straightforward, I assure you).</p>
  
  <p>initResources() is called from the $(document).ready() function, where canvas is also properly initialized.</p>
  
  <p>The specific issue appears to be the gameboard. The X's and O's (it's tictactoe...) appear fine, but the gameboard refuses to appear on the canvas in Chrome alone. Works in all other browsers. Chrome's developer tools insists they're being loaded via Network tab, console is showing everything it should. Thank you.</p>
  
  <p>[EDIT: Just now failed in Firefox as well. May have been a cache issue, at which point I'm even more confused]</p>
  
  <pre><code>var canvas, context, playerPiece, aiPiece;
  var x = new Image();
  var o = new Image();
  var gameBoard = new Image();
  var numResources = 3;   // Total number of resources to wait for loading
  var curResources = 0;
  
  function initResources() {
      // Get all our resources ready to go
      x.height = 130;
      x.width = 130;
      x.onload = isLoaded();
      x.src = "images/gamepieceX.png";
  
      o.height = 130;
      o.width = 130;
      o.onload = isLoaded();// = curResources++;
      o.src = "images/gamepieceO.png";
  
      gameBoard.height = 500;
      gameBoard.width = 500;
      gameBoard.onload = isLoaded(); //= curResources++;
      gameBoard.src = "images/gameBoard.png";
  }
  
  function isLoaded() {
      curResources++;
      console.log("Loaded resource! Total: " + curResources);
      if(curResources == numResources) {
          console.log("All loaded up! Moving on!");
          gameSetup();
      }
  }
  
  function gameSetup() {
      // Draw our board and assign a piece
      console.log("Setting up game!");
      playerPiece = x;
      aiPiece = o;
  
      // Draw gameboard
      context.drawImage(gameBoard, 0, 0);
      console.log(gameBoard);
  
      canvas.addEventListener ("mousedown", mouseClicked, false);
  }
  </code></pre>