1 | ---
|
2 | layout: example.html
|
3 | title: Blend Modes
|
4 | shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
|
5 | docs: >
|
6 | <p>This example shows how to change the canvas compositing / blending mode in
|
7 | post- and precompose event handlers. The Canvas 2D API provides the property
|
8 | <code>globalCompositeOperation</code> with which one can influence which
|
9 | composition operation will be used when drawing on the canvas. The various
|
10 | options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN
|
11 | documentation page</a>.</p>
|
12 |
|
13 | <p>In this example three circles on the corners of an equilateral triangle are
|
14 | drawn with red, green or blue styles respectively. By setting the
|
15 | <code>globalCompositeOperation</code> you can change how these colors turn out
|
16 | when they are combined on the map.</p>
|
17 |
|
18 | <p>You can select an operation in the select-field and you can also control
|
19 | which layers will be affected by the chosen operation through the layer
|
20 | checkboxes.</p>
|
21 | tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
|
22 | ---
|
23 | <div id="map" class="map"></div>
|
24 | <form class="form-horizontal">
|
25 | <label>
|
26 | <select id="blend-mode" class="form-control">
|
27 | <option value="source-over">source-over (default)</option>
|
28 | <option>source-in</option>
|
29 | <option>source-out</option>
|
30 | <option>source-atop</option>
|
31 | <option>destination-over</option>
|
32 | <option>destination-in</option>
|
33 | <option>destination-out</option>
|
34 | <option>destination-atop</option>
|
35 | <option>lighter</option>
|
36 | <option>copy</option>
|
37 | <option>xor</option>
|
38 | <option>multiply</option>
|
39 | <option>screen</option>
|
40 | <option>overlay</option>
|
41 | <option>darken</option>
|
42 | <option>lighten</option>
|
43 | <option>color-dodge</option>
|
44 | <option>color-burn</option>
|
45 | <option>hard-light</option>
|
46 | <option>soft-light</option>
|
47 | <option selected>difference</option>
|
48 | <option>exclusion</option>
|
49 | <option>hue</option>
|
50 | <option>saturation</option>
|
51 | <option>color</option>
|
52 | <option>luminosity</option>
|
53 | </select>
|
54 | Canvas compositing / blending mode
|
55 | </label>
|
56 | <label>
|
57 | <input type="checkbox" id="affect-red" checked>
|
58 | Red circle affected
|
59 | </label>
|
60 | <label>
|
61 | <input type="checkbox" id="affect-green" checked>
|
62 | Green circle affected
|
63 | </label>
|
64 | <label>
|
65 | <input type="checkbox" id="affect-blue" checked>
|
66 | Blue circle affected
|
67 | </label>
|
68 | </form>
|