Using class methods to draw on HTML5 Canvas: scope problems (JS, ES6)

Question

I am having some trouble wrapping my head around some scope problems. I am using a class method to draw a square on the canvas and would like to move it around using another class method, but it seems I can't pass along the context...

class User {
  constructor(user, x, y, ctx) {
    for (let metric in user) { this[metric] = user[metric]; }
    this.initialX = x;
    this.initialY = y;
    this.x = x;
    this.y = y;
    this.ctx = ctx;
    this.draw(this.initialX, this.initialY, this.ctx);
   }

  draw(x, y, ctx) {
    ctx.fillStyle = 'white';
    ctx.fillRect(x,y,20,20);
  }

  move(e) {
    //// stuff about motion goes here
     console.log(e.key, this.ctx); //// can't access `ctx` - the user key shows up in the console but the context is nowhere to be seen
     //// eventually this needs to be draw(x, y, ctx) that's passed back up to the draw function
  }

}

The context is passed into the User class further down in the code as shown in this pen but as far as I can tell the way it's being passed to the User class isn't a problem, it's the way I'm accessing it in the move function.

I did also try defining a variable for the context in the constructor function independent of this but that wasn't successful either.

Diogo Sgrillo · Accepted Answer · 2016-12-15 16:53:42Z

3

You must bind your method. ES6 classes doesn't do that automatically.

In your constructor try to add this line:

this.move = this.move.bind(this);

answered Dec 15, 2016 at 16:53

Diogo Sgrillo

2,7111 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JSilv Over a year ago

Oh great, this is exactly what I was looking for. Thank you so much!

David Gomez · Accepted Answer · 2016-12-15 16:52:16Z

1

You are expecting four arguments (e, x, y, ctx) into your event listener function but the listener will receive only one argument, the event.

Your have to explicitly pass all the arguments to your handler in order to use them or figure out another way to access them.

answered Dec 15, 2016 at 16:52

David Gomez

2,7822 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

Using class methods to draw on HTML5 Canvas: scope problems (JS, ES6)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related