Question

this.x = (Math.random()*canvasWidth);
this.y = (Math.random()*canvasHeight);

(1) this.shift = {x: this.x, y: this.y};

(2) this.shift.x = this.x;
    this.shift.y = this.y;

Hi guys, I am playing with canvas and on my way to create a particle system.

The first (1) one will work but not the second (2) one why?
I am getting an error saying “Cannot set property ‘x’ of undefined” when debug using Chrome dev tools.

Any idea?

Answer 1

Because in example #2 there is no “shift” property of the “this” object, so the runtime cannot resolve any “x” (or “y”) property thereof. You could make it work by first assigning the “shift” object:

this.shift = {};
this.shift.x = this.x;
this.shift.y = this.y;