Forums » Help » Canvas context clipping issue

So, After some work with the fog of war plugin, I wanted to look for higher performance alternatives.

Assuming I dont care about Line of Sight, the first idea that came to mind was to simply clip out a circle from a fog fillRect covering the whole canvas view. However, I can not get this to work. I did some searching around and testing on tutorial sites, and can't seem to get Impact to do the same. I have to be missing something.

The end goal is to have a transparent circle over the player which is their sight radius, with everything outside the circle getting a fillrect darkend alpha applied to it.

            ig.system.context.save();
            //ig.system.context.beginPath();
            //ig.system.context.rect(0, 0, ig.system.width * ig.system.scale, ig.system.height * ig.system.scale);
            //ig.system.context.fillStyle = "rgba(100, 100, 100, .8)";
            //ig.system.context.fill();
            //ig.system.context.closePath();
            

            /// create path
            ig.system.context.beginPath();
            ig.system.context.arc((ig.game.player.pos.x + (ig.game.player.size.x / 2) - ig.game.screen.x) * ig.system.scale, (ig.game.player.pos.y + (ig.game.player.size.y / 2) - ig.game.screen.y) * ig.system.scale, 64 * ig.system.scale, 0, 2 * Math.PI);
            ig.system.context.closePath();

            /// set clipping mask based on shape
            ig.system.context.clip();

            /// clear anything inside it            
            //ig.system.context.clearRect(0, 0, ig.system.width * ig.system.scale, ig.system.height * ig.system.scale);
            this.parent();
            /// remove clipping mask
            ig.system.context.restore()

You could use globalCompositeOperation to first draw a black rectangle over the entire screen, and then chop out a "circle" from that black rectange at the position of the player.

Edit: Does the lit area need to stay lit when the player leaves?

Another very efficient solution is to put a transparent PNG file on top of the player, basically a big black square with a hole. This is how I handled it in my game when the character entered a cave.

in player Entity

darkness: new ig.Image('media/fogofwar.png'),

in player draw()

if (!ig.global.wm && ig.game.playerStats) {
	if (ig.game.playerStats.currentLevel == "Forbiddencave" || ig.game.playerStats.currentLevel == "Whitewhale") {
		this.darkness.draw((x / 2) - 1024, (y / 2) - 1024); // fog of war is 2048 x 2048
	}
}

Just wanted to follow up on this for anyone who does see it. The main idea is to have a multiplayer game where each tank has a viewable radius, and anything outside that radius AND the radius of teammates is shaded. I did it with the Fog of war plugin, but the performance was a sharp hit.

I never was able to get the clipping to work within the same canvas as the game, and because certain effects change that radius, static pictures would not work.

I solved it by drawing to a second canvas, creating the clipped image for each tank, and then drawing that canvas as an image on the game canvas. Works great, and has a solid performance increase. Thanks to those folks that replied, and I hope this can help someone in the future.