title: HTML5 canvas - drawImage not working (only when error ocures )
body: <p>I am trying to create a simple canvas game. I started to draw all the elements of the game using game loops (update, render function). I manage to draw the simple image, but when I try to draw an image using some of the proprieties of it's function class it is not displaying anything. Nethertheless the array bullets[] contains all the objects with the correct objects.</p>
  
  <p>I observed that if I do on purpose an error, then it draw's the bullet. Why this is happening that only when an error occur it draws, but not always?</p>
  
  <p>Thank you!</p>
  
  <pre><code>// Create the canvas
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 512;
  canvas.height = 480;
  document.body.appendChild(canvas);
  
  // Bullet class, defining it's proprieties
  var Bullet = function (x,y,orientation) {
      this.x = x;
      this.y = y;
      this.speed = 512;
      this.orientation = orientation;
      if (orientation == 0)
      {
          var bulletImageUp = new Image();
          bulletImageUp.src = "images/bullet-up.png";
          this.image = bulletImageUp;
      }
      else if (orientation == 90){
          var bulletImageRight = new Image();
          bulletImageRight.src = "images/bullet-right.png";
          this.image = bulletImageRight;
      }
      else if (orientation == 180){
          var bulletImageDown = new Image();
          bulletImageDown.src = "images/bullet-down.png";
          this.image = bulletImageDown;
      }
      else if (orientation == 270){
          var bulletImageLeft = new Image();
          bulletImageLeft.src = "images/bullet-left.png";
          this.image = bulletImageLeft;
      }    
      this.draw  = function () {
          ctx.drawImage(this.image, this.x, this.y);
      }
  }
  
  // The array containing all the bullets objects
  var bullets = [];
  
  // Update game objects
  var update = function (modifier) {
  // When I press a key it executes 
  bullets.push(new Bullet(tank.x, tank.y, tank.orientation));
  };
  
  // Draw everything
  var render = function () {
      for ( i=0; i&lt;bullets.length; i++) {
          bullets[i].draw()
      }
  };
  
  // The main game loop
  var main = function () {
      var now = Date.now();
      var delta = now - then;
      update(delta / 1000);
      render();
      then = now;
  };
  </code></pre>