â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
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>