0

I am relatively new to javascript, I have only programmed in Python before and I am having difficulties to create an object instance in this language.

class SteeringWheel {
  constructor(id) {
    this.id = id;
    this.can = document.getElementById(this.id);
    this.ctx = this.can.getContext('2d');
    this.img = new Image();
    //some img
    this.img.src = "https://images-na.ssl-images-amazon.com/images/I/41iNBF9Q%2BsL._SX425_.jpg";
    this.img.onload = function() {
      this.ctx.drawImage(this.img, 0, 0);
    }
  }

var st = new SteeringWheel('st1')

But the error following error appears:

Uncaught TypeError: Cannot read property 'drawImage' of undefined

I tried to nest the onload function but it does not work. 

this.ctx.onload = function() {
   this.img.onload = function() {
      this.ctx.drawImage(this.img, 0, 0);
    }
}

In my .html file there is a canvas with the id 'st1'. After I call the script written above.

The reason why I created an object is because my future intention is to call:

var st = new SteeringWheel('st2')
var st = new SteeringWheel('st3')

and have several instances of the same object.

It is probably a stupid question but I am completely blocked.

Alexis
  • 394
  • 4
  • 14

1 Answers1

-1

Can you try this

   this.img.onload = () => {
      this.ctx.drawImage(this.img, 0, 0);
    }

Because happening this = this.img. This is true when used with the old function () {} method. But this does not apply when the arrow function is used.

doğukan
  • 23,073
  • 13
  • 57
  • 69