Как в большом цикле правильно генерировать canvas?

Question

В цикле работает очень медленно, если вместо 3000 написать 100000, он совсем зависнет

На рабочем сайте иногда выдает ошибку Uncaught RangeError: Maximum call stack size exceeded

Как можно ускорить такой код?

let c = document.getElementById("myCanvas");
let ctx;
for(let i = 0; i < 3000; i++){
  ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
}

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Ошибку Uncaught RangeError: Maximum call stack size exceeded выдает этот код Math.min(...data.map(e => e.price));

Почему он ограничивает меня?

Answer 1

Не нужно запускать длинный синхронный код. Для отрисовки кадров используйте requestAnimationFrame.

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let i = 0, N = 3000;
const draw = () => {
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();

  i++;
  if (i < N) {
    requestAnimationFrame(draw);
  } else {
    console.log(`${N} iterations are finished`)
  }
}
requestAnimationFrame(draw);

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

БЛОГ НА HUSL

Как в большом цикле правильно генерировать canvas?

Ответы (1 шт):