openlayers/examples/blend-modes.html

Build tools and sources for developing OpenLayers based mapping applications

---
layout: example.html
title: Blend Modes
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 id="map" class="map"></div>
<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>