Resumen del Problema y Solución: Desaparición de la Bola en el Primer Canvas

En esta situación, se presenta el problema de que al ejecutar un código que genera dos lienzos (canvas), la bola que se dibuja en el primer lienzo desaparece y solo aparece en el segundo. La causa de este comportamiento es que ambos lienzos (canvas) comparten el mismo contexto de renderizado, y al dibujar en uno, el otro se borra.

Solución

Para solucionar este problema, hay que asegurarse de que cada lienzo tenga su propio contexto de renderizado y que ambos se actualicen de manera independiente. A continuación, se detalla el enfoque para lograr esto:

1. Crear un contexto para cada canvas: Los contextos de cada canvas deben ser independientes para evitar que un canvas afecte al otro.

2. Modificar la función runCode: Asegúrate de que cada llamada a runCode esté correctamente asociada a su respectivo canvas y contexto.

A continuación se proporciona el código ajustado:

let canvasDiv = document.getElementById("canvasDiv")
let canvasId = 0

function runCode(canvasId) {
    let canvas = document.getElementById(`myCanvas${canvasId}`)
    let ctx = canvas.getContext("2d")

    let steps = 10000

    function update() {
        steps -= 1

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.beginPath();

        ctx.fillStyle = "rgb(145, 209, 255)"
        ctx.arc(50, 50, 10, 0, 2 * Math.PI);
        ctx.fill();

        ctx.closePath()

        if (steps > 0) {
            setTimeout(update, 100)
        }
    }

    update()
}

for (let i = 0; i < 2; i++) {
    let myCanvasId = i

    setTimeout(function() {
        canvasDiv.innerHTML += `<canvas class="canvas" id="myCanvas${myCanvasId}"></canvas><p>${myCanvasId}</p>`

        runCode(myCanvasId)
    }, 1000 * i)
}

Explicación de la Solución

1. Incorporación de let en el bucle for: En lugar de usar una variable global para myCanvasId, se declara dentro del bucle como let, asegurando que cada función setTimeout capture el valor correcto de myCanvasId.

2. Actualización independiente: Cada canvas se actualiza de manera independiente y mantiene su propia cuenta de pasos y su contexto de dibujo.

Implementando estos cambios se garantiza que ambos lienzos mostrarán la bola al mismo tiempo sin interferencias entre ellos.