Putting an image on a canvas

This is absolutely not mine. But I am having difficulty with mine, can't seem to get an image to show up @ all... so this is for reference

by Matt Rummler

HTML

<div id="battlefield">
  <canvas width="1000" height="300">
  </canvas>
</div>

CSS

canvas { background: black; }

JavaScript

function Battlefield() {
    this.canvas = function() {
        var battlefield = document.getElementById('battlefield');
        var canvas = battlefield.getElementsByTagName('canvas')[0];

        return canvas.getContext('2d');
    }
}

function Draw(canvas) {
    if (!canvas) {
        alert('There is no canvas available (yet)!');
        return false;
    }

    this.canvas = canvas;

    this.grass = function(pos_x, pos_y) {
        var terrain = new Terrain();
        var specs = terrain.grass();

        var self = this;
        
        var img = new Image();
        img.onload = function() {
            self.canvas.drawImage(img, specs.position_x, specs.position_y, specs.dimension_x, specs.dimension_y, pos_x, pos_y, specs.dimension_x, specs.dimension_y);
        };
        img.src = 'http://i277.photobucket.com/albums/kk45/ryan8885/grass.png';
    }
}

function Terrain() {
    this.grass = function() {
        return specs = {
            dimension_x: 25,
            dimension_y: 25,
            position_x: 0,
            position_y: 0
        }
    }
}

(function() {
    var battlefield = new Battlefield();
    var draw = new Draw(battlefield.canvas());
    draw.grass(0, 0);
})();