0

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...

2
  • El código debe ir en la pregunta, agrégalo con el botón que indica {}.
    – padaleiana
    Commented el 22 mar. 2021 a las 0:05
  • gracias, ya lo agregue
    – lainz
    Commented el 22 mar. 2021 a las 2:42

1 respuesta 1

0

Ok leyendo un poco encontré la solución https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke#re-stroking_paths

"Typically, you'll want to call beginPath() for each new thing you want to stroke. If you don't, the previous sub-paths will remain part of the current path, and get stroked every time you call the stroke() method."

Traducción:

"Tipicamente, querrás llamar beginPath() para cada nueva cosa que quieras dibujar. Si no lo haces, las sub-rutas previas permanecerán en la ruta actual, y serán dibujadas cada vez que llamas el metodo stroke()."

No sabía que hacía falta poner ctx.beginPath(), ahi puse en el código original (comentado) donde agregué para solucionarlo.

2
  • En lugar de editar el código en la pregunta, pon lo que agregaste en esta respuesta. Además, traduce lo que has encontrado.
    – padaleiana
    Commented el 22 mar. 2021 a las 9:54
  • Si puse que agregue ctx.beginPath()
    – lainz
    Commented el 23 mar. 2021 a las 13:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.