Compositing on the Canvas
In this exercise you will learn about the global compositing properties available for the canvas element through JavaScript. Compositing deals with setting global transparency, asset stacking and controlling how your assets will interact with one another when they overlap on your canvas.
globalAlpha 0.0 - 1.0;
globalCompositeOperation source-atop || source-in || source-out || source-over (default) || destination-atop || destination-in || destination-out || destination-over || lighter || copy || xor
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.globalAlpha = 1;
ctx.fillStyle = "magenta";
ctx.fillRect(20, 20, 100, 100);
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>
</html>