Una vez que hemos visto como hacer animaciones sencillas con el elemento canvas, vamos a volver a las propiedades de dibujo que nos ofrece. En esta entrada vamos a ver cómo podemos elegir la operación de intersección entre objetos.
Es un valor global del contexto así que afectará a las operaciones de intersección siguientes, por lo que tendremos que cambiarla antes de dibujar cada nuevo objeto si queremos que esta operación sea distinta. El uso básico sería:
ctx.globalCompositeOperation=»source-over»;
Source-over es el valor por defecto y significa que el segundo objeto en ser pintado estará sobre el primero, tapándolo, a menos que el segundo objeto tenga cierta transparencia.
Entre las opciones que podemos tomar están: source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy y xor.
Con las source-x y destination-x podemos jugar a que un objeto esté sobre otro, lo trunque, lo recorté, o lo mismo con el segundo objeto. Con lighter se mezcla el
color de ambos donde coinciden, con copy solo se pinta el segundo elemento y con Xor la zona intersectada queda del color de fondo.
En dibujos estáticos si pintamos los objetos en el orden adecuado no sería necesario modificar este parámetro para colocar uno sobre otro, aunque las opciones lighter o xor son interesantes. También pueden facilitar el dibujo de elementos complejos mediantes recortes o truncados de elementos más simples. En una animación nos puede servir para especificar el momento que un objeto está sobre otro (algo así como el z-index en elementos html). Imaginemos por ejemplo la animación de la luna girando alrededor de la tierra, unas veces, al pasar por delante hay que dibujar la luna encima de la tierra, y otras, cuando pasa por detrás es la tierra quien debe estar encima de la luna.
Hay que tener cuidado con los valores que acepta cada navegador, ya que hay versiones que no aceptan los valores x-in, x-out o copy. Aunque las versiones más modernas de los navegadores punteros aceptan todos.
Aunque no sean todos, aquí algunos ejemplos:
       xor:

.canvas4{

width: 500px;

height: 300px;

margin: 0 auto;

display:block;

border: 1px solid #000;

}

var ctx41 = document.getElementById(«canvas41»).getContext(«2d»);

ctx41.fillStyle = «rgb(200,200,0)»;

ctx41.fillRect(50, 100, 200, 150);

ctx41.fillStyle=»rgb(0,200,0)»;

ctx41.globalCompositeOperation=»xor»;

ctx41.beginPath();

ctx41.moveTo(150,200);

ctx41.lineTo(500,50);

ctx41.lineTo(500,200);

ctx41.fill();

       lighter:

var ctx42 = document.getElementById(«canvas42»).getContext(«2d»);

ctx42.fillStyle = «rgb(200,200,0)»;

ctx42.fillRect(50, 100, 200, 150);

ctx42.fillStyle=»rgb(0,200,0)»;

ctx42.globalCompositeOperation=»lighter»;

ctx42.beginPath();

ctx42.moveTo(150,200);

ctx42.lineTo(500,50);

ctx42.lineTo(500,200);

ctx42.fill();

       destination-atop:

var ctx43 = document.getElementById(«canvas43»).getContext(«2d»);

ctx43.fillStyle = «rgb(200,200,0)»;

ctx43.fillRect(50, 100, 200, 150);

ctx43.fillStyle=»rgb(0,200,0)»;

ctx43.globalCompositeOperation=»destination-atop»;

ctx43.beginPath();

ctx43.moveTo(150,200);

ctx43.lineTo(500,50);

ctx43.lineTo(500,200);

ctx43.fill();