--- template: example.html title: Blend modes example shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers. docs: >

This example shows how to change the canvas compositing / blending mode in post- and precompose event handlers. The Canvas 2D API provides the property `globalCompositeOperation` with which one can influence which composition operation will be used when drawing on the canvas. The various options are well described on the MDN documentation page.

In this example three circles on the corners of an equilateral triangle are drawn with red, green or blue styles respectively. By setting the `globalCompositeOperation` you can change how these colors turn out when they are combined on the map.

You can select an operation in the select-field and you can also control which layers will be affected by the chosen operation through the layer checkboxes.

tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector" ---
Canvas compositing / blending mode Red circle affected Green circle affected Blue circle affected