Recientemente comencé a aprender a dibujar en el lienzo HTML con javascript e hice un juego simple en el que un agujero negro se come planetas, con dos lienzos, uno para el fondo y otro para el juego.
<body> <canvas id="game-board"></canvas> <canvas id="background"></canvas> <script src="gameplay.js"></script> <script src="bg.js"></script> </body>Aunque pensé que había puesto el color de fondo del tablero de juego en negro...
ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);... se muestra como transparente, lo que parece extraño pero en realidad es exactamente lo que quiero.
Pero ahora estoy tratando de dibujar un "agujero negro" (solo un círculo negro con bordes descoloridos) encima, pero también siempre se muestra transparente con respecto al otro lienzo, que no es lo que quiero.
draw() { let gradient = ctx.createRadialGradient( holePosition.x, holePosition.y, holeRadius / 2, holePosition.x, holePosition.y, holeRadius * 2 ); gradient.addColorStop(0, 'rgba(0,0,0, 1)'); gradient.addColorStop(1, 'rgba(0,0,0, 0)'); ctx.beginPath(); ctx.arc(holePosition.x, holePosition.y, holeRadius * 2, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); ctx.closePath(); }El agujero negro "oscurece" correctamente las cosas en su propio lienzo (puedes ver cuando lo mueves sobre los planetas que aparecen), pero aún es transparente con respecto al otro lienzo debajo de él en el HTML que muestra todas las estrellas.
Entonces, ¿cómo puedo hacer que el agujero negro también "oculte" el otro lienzo detrás de él?
Codesandbox (muévase con las teclas de flecha)
He jugado con ctx.globalAlpha y ctx.save() / ctx.restore() pero sin éxito.