--- layout: example.html title: Blend Modes 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" ---