77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
---
|
|
template: example.html
|
|
title: Blend modes example
|
|
shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
|
|
docs: >
|
|
<p>This example shows how to change the canvas compositing / blending mode in
|
|
post- and precompose event handlers. The Canvas 2D API provides the property
|
|
<code>globalCompositeOperation</code> with which one can influence which
|
|
composition operation will be used when drawing on the canvas. The various
|
|
options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN
|
|
documentation page</a>.</p>
|
|
|
|
<p>In this example three circles on the corners of an equilateral triangle are
|
|
drawn with red, green or blue styles respectively. By setting the
|
|
<code>globalCompositeOperation</code> you can change how these colors turn out
|
|
when they are combined on the map.</p>
|
|
|
|
<p>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.</p>
|
|
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
|
|
---
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<form class="form-horizontal">
|
|
<label>
|
|
<select id="blend-mode" class="form-control">
|
|
<option value="source-over">source-over (default)</option>
|
|
<option>source-in</option>
|
|
<option>source-out</option>
|
|
<option>source-atop</option>
|
|
<option>destination-over</option>
|
|
<option>destination-in</option>
|
|
<option>destination-out</option>
|
|
<option>destination-atop</option>
|
|
<option>lighter</option>
|
|
<option>copy</option>
|
|
<option>xor</option>
|
|
<option>multiply</option>
|
|
<option>screen</option>
|
|
<option>overlay</option>
|
|
<option>darken</option>
|
|
<option>lighten</option>
|
|
<option>color-dodge</option>
|
|
<option>color-burn</option>
|
|
<option>hard-light</option>
|
|
<option>soft-light</option>
|
|
<option selected>difference</option>
|
|
<option>exclusion</option>
|
|
<option>hue</option>
|
|
<option>saturation</option>
|
|
<option>color</option>
|
|
<option>luminosity</option>
|
|
</select>
|
|
Canvas compositing / blending mode
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-red" checked>
|
|
Red circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-green" checked>
|
|
Green circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-blue" checked>
|
|
Blue circle affected
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|