title: HTML5 Canvas - adding an image to ctx
body: <p>I thought I'd have a little play around with Canvas animations, as I've not really done much with it before. So I forked <a href="https://github.com/DaNmarner/Flapcopy" rel="nofollow noreferrer">this repo</a></p>
  <p><a href="http://danmarner.github.io/Flapcopy/" rel="nofollow noreferrer">Live demo</a></p>
  <p>and decided my first stop would be to replace the 'red rect' with an image. Should be pretty straight forward I thought. So I'll just replace the <code>ctx.rect(this.x, this.y, this.width, this.height);</code> with a new <code>Image()</code></p>
  <p>For some reason, the image never appears.</p>
  <p>Here is my Bird.draw method.</p>
  <pre><code>Bird.prototype.draw = function(ctx) {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.width, this.height);
    ctx.fillStyle = this.fill;
    ctx.fill();
    
    base_image = new Image();
    base_image.src = 'images/icon.jpg';
    base_image.onload = function(){
        console.log('loaded');
        ctx.drawImage(base_image, this.x, this.y, this.width, this.height);
        return ctx.fillText(&quot;&quot; + this.score + &quot;/&quot; + this.highest, this.x, this.y - 2);
    }
   
  };
  </code></pre>
  <p><a href="http://jsfiddle.net/Z3wA9/1/" rel="nofollow noreferrer">and a full working JSFiddle here</a></p>
  <p>I've also tried swapping out he image.load for a pattern, but it still didn't load.</p>