feComposite-operator-lighter-ref.html

Enable keyboard shortcuts

<!doctype html>

<style>* { margin: 0; padding: 0; }</style>

<canvas id="canvas" width="200" height="200"></canvas>

<script>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var width = canvas.width;

var height = canvas.height;

ctx.globalCompositeOperation = 'lighter';

ctx.fillStyle = '#f00';

ctx.fillRect(0,0,width,height);

gradient = ctx.createLinearGradient(0, 0, 0, height);

gradient.addColorStop(0, "#0f0");

gradient.addColorStop(1, "#00f");

ctx.fillStyle = gradient;

ctx.fillRect(0, 0, width, height);

</script>