I have been wrestling with creating fog of war for a while now. I actually did create it, but I consider the implementation too resource-heavy to be usefull.

For initial information: I use createjs / easeljs framework / library for the project and the fog of war is now implemented so, that there is a layer with the "fogged" image and data of the map on bottom and on top of that is the non-fogged / clear layer of the map. In the clear layer I only show certain parts by filtering the layer with shapes and the rest is invisible. So only the areas that are visible are shown.

Also note that even the fogged parts are partially visible, e.g. the whole terrain of the map is always visible beneath the fog of war.

This creates 2 different layers with the same information of the map, instead of creating a separate fog of war layer, that would only contain the fog and be filtered to show the non-fogged parts.

I have been unable to make this work so far.

So basically I can now use filters to show certain parts of a layer, but not to make parts of it have an alpha value. E.g. If I have a fog-layer (that contains the fog) and want to show it except certain circular parts (which would reveal the map below, with alpha = 0), how is that achieved? Now I can only show certain parts of a layer with filtering, instead of hiding them / making the have alpha or reverse the filtering.


1 Answer 1


The problem was solved by using another canvas and compositeOperation = "destination-out".


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .