Увеличение x и y при вызове requestanimationframe

Question

Я хочу, чтобы x и y увеличивались на 1 в каждом запросеAnimationFrame, он увеличивается только один раз

https://jsfiddle.net/2mzb7axu/1/

update(ctx) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    this.x++
    this.y++
    ctx.lineTo(this.x, this.y);
    ctx.lineWidth = 5;
    ctx.stroke();
  }

Answer 1

Ваша animate функция инициирует конструктор Line при каждом вызове update. Попробуйте запустить класс Line в конструкторе Display, что-то вроде этого:

constructor() {
    this.canvas = document.querySelector("#canvas");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.animateBound = this.animate.bind(this);

    this.line = new Line();
}

и в вашей функции update вызовите существующий экземпляр Line:

animate() {
    this.line.update(this.ctx);
    console.log('Animate called');
    requestAnimationFrame(this.animateBound);
}