javascript - Canvas unable to find context when requestAnimationFrame is called - ES6 -

this question has answer here:

• how access correct `this` inside callback? 6 answers

i experimenting class based code. create class canvas , pass component rendered. problem when browser requests animation frame context lost, , becomes undefined. looking explanation of why case.

i not concerned best practice figuring out why context lost.

i have attached link example on codepen.

http://codepen.io/briandgls/pen/bojorm?editors=001

here js code:

class canvas {   constructor() {     this.canvas = document.getelementbyid('canvas');     this.context = this.canvas.getcontext('2d');     this.width = this.canvas.width = window.innerheight;     this.height = this.canvas.height = window.innerwidth;     this.components = [];   }    draw() {     this.context.clearrect(0, 0, this.width, this.height);     this.context.globalcompositeoperation = 'hard-light';      this.components.map(_ => _.render());      window.requestanimationframe(this.draw);   }    listeners() {     window.addeventlistener('resize', () => {       this.width = this.canvas.width = window.innerheight;       this.height = this.canvas.height = window.innerwidth;     }, false);   }    init() {     this.listeners();     this.draw();   } }  class utils {   randomnum(max, min) {     return math.floor(max * math.random()) + min;   }    color(opacity) {     return `hsla(${this.randomnum(360, 1)}, 70%, 60%, ${opacity})`;   } }  const utils = new utils(); const _canvas = new canvas();  class stars {   constructor(_) {     this.total = _.total;     this.spawn = [];     this.z = 300;     this.canvas = _.canvas;     this.xw = this.canvas.width * this.z;     this.xh = this.canvas.height * this.z;   }    create() {     while (this.spawn.length < this.total) {       this.spawn.push({         pos: [this.xw * math.random() - this.canvas.width / 2 * this.z, this.xh * math.random() - this.canvas.height / 2 * this.z, this.z],         vel: [0, 0, -2],         r: utils.randomnum(500, 100),         color: utils.color(1)       });     }   }    draw() {     (let = 0; < this.spawn.length; ++i) {       let t = this.spawn[i];       let x = t.pos[0] / t.pos[2];       let y = t.pos[1] / t.pos[2];       if (x < -this.canvas.width / 2 || x > this.canvas.width / 2 || y < -this.canvas.height / 2 || y > this.canvas.height / 2 || t.pos[2] < 0) {         this.spawn.splice(i, 1);         --i;         continue;       }       this.canvas.context.beginpath();       this.canvas.context.fillstyle = t.color;       this.canvas.context.arc(x, y, t.r / t.pos[2], 0, math.pi * 2, false);       t.pos[0] += t.vel[0];       t.pos[1] += t.vel[1];       t.pos[2] += t.vel[2];       this.canvas.context.fill();     }   }    render() {     this.create();     this.canvas.context.save();     this.canvas.context.translate(this.canvas.width / 2, this.canvas.height / 2);     this.draw();     this.canvas.context.restore();   } }  _canvas.components.push(new stars({   canvas: _canvas,   total: 200 })); 

when invoke draw() via window.requestanimationframe(this.draw) scope in draw() bound window instead of canvas. try binding scope explicitly this:

window.requestanimationframe(this.draw.bind(this));