HTML Canvas не может нарисовать изображение

Question

Учитывая следующие два объекта:

function newDoodle() {
  var Doodle = {
    /* Variables for creating the canvases */
    cnvWdth: 800, 
    cnvHght: 250,
    bgCanvas: false,
    fgCanvas: false,
    bgContext: false,
    fgContext: false,
    bodyElement: false,

    /* Variables for future objects */
    background: false,

    init: function(bodyElement) {
      /* Set up the two canvas elements */
      this.bodyElement = bodyElement;
      this.bgCanvas = this.createCanvas('background');
      this.fgCanvas = this.createCanvas('foreground');
      this.bgContext = this.getContext(this.bgCanvas);
      this.fgContext = this.getContext(this.fgCanvas);

      /* Set up the background canvas */
      this.bgImage = newBackground();
      this.bgImage.init(this.bgContext);
    },

    createCanvas: function(id) {
      var canvas = $('<canvas />').appendTo(this.bodyElement);
      canvas.attr('width', this.cnvWdth);
      canvas.attr('height', this.cnvHght);

      return canvas[0];
    },

    getContext: function(canvas) {
      var context = canvas.getContext('2d');
      return context;
    }
  }
  return Doodle;
}

function newBackground() {
  var Background = {
    /* Background Image source variables */
    srcXPos: 0,
    srcYPos: 0,
    srcWdth: 800,
    srcHght: 250,

    bgImage: new Image(),
    bgImageSrc: 'doodle_background.png',
    context: false,

    init: function(ctx) {
      this.context = ctx;
      this.bgImage.addEventListener('load', this.drawBackground(), false);
      this.bgImage.src = this.bgImageSrc;
    },

    drawBackground: function() {
      this.context.drawImage(this.bgImage, 0, 0);
    }
  }
  return Background;
}

Я сохраняю возвращенный объект newDoodle() в переменной и вызываю ее функцию init. В конечном итоге он вызовет функцию drawBackground() объекта newBackground(). Я проверил, что и изображение, и контексты действительны, и даже с "use strict" ничего не сообщается в консоли, но ничего не обращается к холсту. Чего мне не хватает?

Answer 1

Эта строка является виновником:

this.bgImage.addEventListener('load', this.drawBackground(), false);

Посмотрите, как вы вызываете this.drawBackground прямо здесь, а не , передавая это как обработчик событий?

Что вы, вероятно, хотите, это:

var that = this;
this.bgImage.addEventListener('load',
    function () { that.drawBackground(); }, false);

Обратите внимание, что вы не можете сократить до

this.bgImage.addEventListener('load',
    this.drawBackground, false); // will not work!

, поскольку drawBackground нужен контекст & ndash; контекст this, а не контекст холста. Ну, это тоже. Во всяком случае, я отвлекся:)