Estoy escribiendo un motor de juego 2D simple usando el lienzo HTML5. He llegado a agregar un motor de iluminación. Cada fuente de luz tiene un valor de radio y un valor de intensidad (0-1, por ejemplo, 1 sería muy brillante). También hay un valor de luz ambiental que se utiliza para iluminar todo lo demás en el mundo que no está cerca de una fuente de luz (0-1, por ejemplo, 0.1 sería luz de luna). El proceso de iluminación se realiza en un lienzo separado sobre el lienzo principal:

Para cada fuente de luz, se dibuja un gradiente radial en esa posición con el mismo radio que la fuente de luz. El gradiente tiene dos paradas: el centro es negro con un alfa de 1 intensidad de la luz y el extremo / borde es negro con un alfa de 1 valor de luz ambiental. Todo eso funciona bien. Aquí es donde sale mal: / Necesito llenar todo el lienzo con negro con un valor de luz alfa de 1 ambiente y, en este momento, hago esto configurando context.globalCompositeOperation como fuente y luego rellenando Rectificando todo el lienzo. @

Mi código para estas cosas es:

var amb = 'rgba(0,0,0,' + (1-f.ambientLight) + ')';
for(i in f.entities) {
    var e = f.entities[i], p = f.toScreenPoint(e.position.x, e.position.y), radius = e.light.radius;

    if(radius > 0) {
        var g = cxLighting.createRadialGradient(p.x, p.y, 0, p.x, p.y, radius);
        g.addColorStop(0, 'rgba(0,0,0,' + (1-e.light.intensity) + ')');
        g.addColorStop(1, amb);

        cxLighting.fillStyle = g;
        cxLighting.beginPath();
        cxLighting.arc(p.x, p.y, radius, 0, Math.PI*2, true);
        cxLighting.closePath();
        cxLighting.fill();
    }
}
//Ambient light
cxLighting.globalCompositeOperation = 'source-out';
cxLighting.fillStyle = amb;
cxLighting.fillRect(0, 0, f.width, f.height);
cxLighting.globalCompositeOperation = 'source-over';

Sin embargo, en lugar de obtener lo que no quiero del motor (izquierda), obtengo una especie de gradiente invertido (derecha). Creo que esto se debe a que cuando dibujo el rectángulo con lasource-out operación compuesta afecta los colores del gradiente en sí porque son semitransparentes.

¿Hay alguna manera de hacer esto de manera diferente o mejor? ¿Usando recorte tal vez, o dibujando el rect sobre todo primero?

También modifiqué la @ del Centro de Desarrollo de Moziejempl en el compostaje para replicar lo que necesito hacer y ninguno de los modos compuestos parecía funcionar,Mira es si ayudaría.

Muchas gracias, cualquier respuesta sería genial