JavaScript - Canvas won't Show Image -

this code suppose show image import can't figure out why doesn't work. thank help.

var app = new fotoprint();  function fotoprint() {  this.init = function() {      this.im = new image();      this.im.onload = function () {          this.canvas = document.getelementbyid('canvas');         this.ctx = this.canvas.getcontext("2d");         this.ctx.clearrect(0, 0, this.canvas.width, this.canvas.height);         this.ctx.strokestyle = "black";         this.ctx.linewidth = 2;         this.ctx.strokerect(0, 0, this.canvas.width, this.canvas.height);         this.ctx.drawimage(this.im,0,0);      };      this.im.src = "images/allison1.jpg";  };  };  app.init(); 

it's scope issue, why tend name variable scope when i'm getting around (other people use that mentioned in answer, or else, doesn't matter).

all creates new variable isn't used anywhere else. unlike this special keyword reference object in current scope. try code console logging , should see difference. outside onload function this refers fotoprint instance, whereas inside onload function this refers img instance.

var app = new fotoprint();  function fotoprint() {      var _scope_ = this;      _scope_.init = function() {          console.log('`this` outside onload', this);         console.log('`_scope_` outside onload', _scope_);          _scope_.im = new image();         _scope_.im.onload = function () {              console.log('`this` inside onload', this);             console.log('`_scope_` inside onload', _scope_);              _scope_.canvas = document.getelementbyid('canvas');             _scope_.ctx = _scope_.canvas.getcontext("2d");             _scope_.ctx.clearrect(0, 0, _scope_.canvas.width, _scope_.canvas.height);             _scope_.ctx.strokestyle = "black";             _scope_.ctx.linewidth = 2;             _scope_.ctx.strokerect(0, 0, _scope_.canvas.width, _scope_.canvas.height);             _scope_.ctx.drawimage(_scope_.im,0,0);          };          _scope_.im.src = "images/allison1.jpg";      };  };  app.init();