Intento encontrar un (supuesto) memory leak, la animación se supone que muestre una serie de grafos en cada frame, pero lo que hace (al parecer) es no liberar el array de grafos y sigue dibujando todo cada vez que pasa un frame, haciendo la animación muy lenta.
Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo):
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []
function randomGraph() {
return {
x: Math.random() * 500,
y: Math.random() * 500,
w: 5 + Math.random() * 70,
h: 5 + Math.random() * 70
}
}
function middleX(g) {
return g.x + (g.w / 2)
}
function middleY(g) {
return g.y + (g.h / 2)
}
function draw() {
ctx.clearRect(0, 0, 500, 500);
let c = 2 + Math.trunc(Math.random() * 5)
let columns = c
grafos.length = 0
for (let i = 0; i < c; i++) {
grafos.push(randomGraph())
}
ctx.fillStyle = "#FFFFFF"
ctx.fillRect(0, 0, 500, 500);
ctx.fillStyle = "#00FF00";
for (let i = 0; i < grafos.length; i++) {
ctx.strokeStyle = "#0000FF";
//ctx.beginPath() // <-- aca arregla el problema
ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
ctx.stroke();
}
ctx.lineWidth = 2;
ctx.strokeStyle = "#FF0000";
for (let y = 0; y < columns; y++) {
for (let x = 0; x < columns; x++) {
let index = (y * columns + x) % grafos.length
let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
//console.log('index', index, index2)
//ctx.beginPath() // <-- aca arregla el problema
ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
ctx.stroke()
}
}
window.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)
https://stackblitz.com/edit/web-platform-nex6wm?file=index.html
Intente limpiar el array, ponerlo solo dentro de la función draw pero no pasa nada.
Edit: poniendo un log se ve que no es el array, el length se ve correcto. Es algo con el canvas...
{}
.