Почему этот холст вызывает утечку памяти?

Question

Следующий код вызывает утечку памяти / ЦП - загрузка ЦП быстро увеличивается и достигает 100% в течение нескольких минут, что снижает производительность.Я хочу понять, почему это происходит, поэтому я не буду повторять подобные ошибки в будущем.

function drawBoard(w, h, p, context) {

  for (var x = 0; x <= w; x += 40) {
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, h + p);
  }


  for (var x = 0; x <= h; x += 40) {
    context.moveTo(p, 0.5 + x + p);
    context.lineTo(w + p, 0.5 + x + p);
  }

  context.strokeStyle = "black";
  context.stroke();

}
let cancel
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
let context = ctx
function Loop() {
  cancel = window.requestAnimationFrame(Loop)
  drawBoard(800, 600, 10, context)
}
Loop() 

Answer 1

Это потому, что вы никогда не используете context.beginPath ();

Это из MDN: «Метод CanvasRenderingContext2D.beginPath () API Canvas 2D запускает новый путь , опустошая список подпутей "

function drawBoard(w, h, p, context) {

  for (var x = 0; x <= w; x += 40) {
    context.beginPath();
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, h + p);
    context.stroke();
   
  }


  for (var y = 0; y <= h; y += 40) {
    context.beginPath();
    context.moveTo(p, 0.5 + y + p);
    context.lineTo(w + p, 0.5 + y + p);
    context.stroke();
  }

}
let cancel
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
let w = canvas.width = 800;
let h = canvas.height= 600;
let context = ctx
function Loop() {
  cancel = window.requestAnimationFrame(Loop);
  context.clearRect(0,0,w,h)
  drawBoard(w, h, 10, context)
}
Loop() 

<canvas id="canvas"></canvas>