Question

How to use globalCompositeOperation to set the type of composite operation to apply when drawing shapes in JavaScript

Answer 1

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   
           
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.globalCompositeOperation = "xor";

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);

</script>

 

70+ SQL courses for beginners and professionals

Answer 2

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   
           
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.globalCompositeOperation = "lighter";

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);

</script>

 

70+ SQL courses for beginners and professionals