Forums » Help » globalCompositeOperation

Hello Impact community,

I am having difficulty getting context.globalCompositeOperations working when drawing directly to the canvas. I am creating a simple non-dynamic lighting system where the lights and shadows are only calculated once when the level is first loaded. I am trying to do this by using the 'lighter' composite operation and then a 'source-over' operation for the darkmask.

Here is the light rendering code I have now:

                for(var i= 0; i<this.lights.length; i++){
                        ig.system.context.save();
                        ig.system.context.globalCompositeOperation = "lighter";
                        this.lights[i].draw(ig.system.context);
                        ig.system.context.globalCompositeOperation = "source-over";
                        this.darkMask.draw(ig.system.context);
                        ig.system.context.restore();
                }

The dark mask is drawn on top of the canvas, but it basically blocks out everything else, and the 'lighter' operation is all but ignored. What I believe should happen is the light object should pierce through the dark mask, but instead the dark mask is completely blocking the light.

Am I going about this the wrong way?

Thanks.

It's important to note that a canvas context can only support one composite operation throughout its life cycle. If we want to use multiple composite operations ... we need to apply the operations on a hidden canvas and then copy the results onto a visible canvas.

This may explain why your first operation does stuff, and the second one does not.

Also, code is easier for everyone to read if you enclose it between ## like this:

##
function foo() {
console.log('bar');
}
##

Result:

function foo() {
    console.log('bar');
}

Bleh. It was staring at me right in the face but I failed to read. Thank you for pointing out the obvious Joncom, I have it working now.

I also updated the OP, thank you for the advice.

if you read again the description of 'source-over', you'll see that if you draw A on B with a source-over, you'll get every pixel of B where A is not zero. So yes, any detail from A or A + light will be lost.
So what about trying... darker ???

Something else : you want to darken things once for every light. Maybe you should get the darkening part out of the for() loop.