Изображение не отображается на холсте

Question

Я экспериментирую с элементом canvas, но по какой-то причине он не отображает мое изображение.

Я использую следующий код:

function Canvas() {
  this.field = 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 img = new Image();
    img.onload = function(){
      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);
      console.log('success???'); // this is being output
    };
    img.src = '/img/terrain.png';
  }
}

(function() {
  var canvas = new Canvas();
  var draw = new Draw(canvas.field());
  draw.grass();
})();

Нет ошибок, но изображение просто не отображается. Я проверил, существует ли изображение, и оно существует. Я также проверил specs, и они содержат то, что должны:

dimension_x: 25
dimension_y: 25
position_x: 0
position_y: 0

Есть идеи, что я делаю не так?

http://jsfiddle.net/uwkfD/3/

Answer 1

pos_x и pos_y - это undefined в вашем коде.Это работает, если вы передаете значения для них draw.grass():

draw.grass(0, 0);

DEMO

Протестировано в Chrome и Firefox.

Answer 2

Это может быть потому, что вам нужен контекст для рисования.

Попытка:

this.context = canvas.getContext('2d')

Затем вызовите функции рисования для объекта контекста, а не для объекта canvas:

this.context.drawImage(img, specs.position_x, specs.position_y, specs.dimension_x, specs.dimension_y, pos_x, pos_y, specs.dimension_x, specs.dimension_y);

Также кажется, что ваша ссылка на canvas также неверна, она должна быть this.canvas (или this.context), а не просто canvas, по крайней мере, как я понимаю область видимости в javascript.