Superposiciones
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>