Superposiciones en el Canvas
Cuando se dibujan varias formas en un canvas de forma superpuesta estas se muestran en el orden en que se dibujan, de manera que cada forma se dibuja encima de la anterior. Por defecto se superponen sin más: la de arriba oculta a la anterior, pero este comportamiento puede cambiarse.
De entrada podemos hacer que las figuras sean más o menos opacas, con lo que una imagen no oculta del todo a la de abajo sino que puede presentar cierta transparencia. Para ello usaremos la propiedad globalAlpha, que toma valores entre 0 (totalmente trasnparente) y 1 (totalmente opaco)
<canvas width="600" height="300" id="miPanel"></canvas>
<script>
var panel = document.getElementById('miPanel');
var lapiz = panel.getContext("2d");
lapiz.beginPath();
lapiz.fillStyle = "#FF0000";
lapiz.fillRect(20, 20, 80, 80);
lapiz.globalAlpha = 0.2;
lapiz.fillStyle = "#0066FF";
lapiz.beginPath();
lapiz.arc(60, 60, 40, 0, Math.PI*2,true);
lapiz.fill();
</script>
Pero además podemos hacer que al superponer las formas se combinen de varias maneras, algo parecido a las mezclas de color de fonfo en CSS. Mira esta muestra obtenida por superposición de un rectángulo y un círculo usando todas las opciones posibles.
Para ver las diferentees formas de combinación lo mejor es un ejemplo como este. En el canvas primero se dibuja un rectángulo (destination) y encima el circulo (source). El rectángulo se dibuja en el modo por defecto que es el source-over, el circulo se dibujará encima y se combina con el rectángulo según la opción que seleciones.
El código básico para este ejemplo lo tienes aquí, y puedes jugar un poco con él para aprender bien como funcionan las combinaciones de imágenes en el canvas. en este ejemplo el modo usado es source-out: solo se ve la parte del dibujo source (círculo en este caso<) que queda fuera del destination (rectángulo rojo en este ejemplo), que queda oculto.
<canvas width="600" height="300" id="miPanel"></canvas>
<script>
var panel = document.getElementById('miPanel');
var lapiz = panel.getContext("2d");
//Dibuja el rectángulo (Destination)
lapiz.beginPath();
lapiz.globalCompositeOperation ="source-over";
lapiz.clearRect(0, 0, panel.width, panel.height);
lapiz.fillStyle = "#FF0000";
lapiz.fillRect(18,18,75,75);
//Elije la opción para combinar Destination con Source
lapiz.globalCompositeOperation = "source-out";
//Dibuja el círculo (source)
lapiz.fillStyle = "#0066FF";
lapiz.beginPath();
lapiz.arc(80,80,45,0,Math.PI*2,true);
lapiz.fill();
</script>