-2

This code is just suppose to show the image i import but i can't figure out why it doesn't work. Thank you for the 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();
2TheToilet
  • 3
  • 1
  • 1
    Im no expert at JS, but from reading through this, you need something linked to this on the HTML side? Possibly, `
    `.
     – Nedinator Jul 23 '15 at 20:58
  • Any error in your console? – taxicala Jul 23 '15 at 20:59
  • The only error that firebug showed was that 'this.ctx.drawImage(this.im,0,0);' TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. – 2TheToilet Jul 23 '15 at 21:02
  • put `app.init()` into `onload` event to make sure the html is already rendered by browser? – Jakuje Jul 23 '15 at 21:03

2 Answers2

2

this will change inside onload. Try to set a variable like:

var that = this;

before this.im.onload definition.

You can try it here: http://jsfiddle.net/8kv0px2m/

Willian
  • 136
  • 4
  • It didn't work on mine. =/ how do i make sure my image source is correct? – 2TheToilet Jul 23 '15 at 21:18
  • Any error in your console? How is your code? Did you try the fiddle? – Willian Jul 23 '15 at 21:28
  • Oh it worked! I forgot to change this to that... Can you please explain why i had to change it? – 2TheToilet Jul 23 '15 at 21:38
  • You need to understand how the "this" keyword works in JavaScript. Please read the following references: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this http://stackoverflow.com/a/3127440/5107058 – Willian Jul 24 '15 at 11:59
2

It's a scope issue, which is why I tend to name my variable scope when I'm getting around this (other people use that as mentioned in another answer, or something else, it doesn't matter).

All this does is creates a new variable that isn't used anywhere else. Unlike this which is a special keyword to reference the object in the current scope. Try this code with the console logging and you should see the difference. Outside the onload function this refers to your FotoPrint instance, whereas inside the onload function this refers to the 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();
Tom Dyer
  • 457
  • 2
  • 10