Code
Execute
<!DOCTYPE html> <html> <head> <title>wikitechy-globalCompositeOperation Property in canvas</title> </head> <body> <h1>wikitechy-globalCompositeOperation Property in canvas</h1> <canvas id="wikitechyCanvas" width="300" height="180" style="border:2px solid red;"> </canvas> <script> var gco = document.getElementById("wikitechyCanvas"); var gcox = gco.getContext("2d"); gcox.fillStyle = "blue"; gcox.fillRect(30, 30, 85, 60); gcox.fillStyle = "green"; gcox.globalCompositeOperation = "source-over"; gcox.fillRect(50,50, 85, 60); gcox.fillStyle = "blue"; gcox.fillRect(150, 30, 85, 60); gcox.fillStyle = "green"; gcox.globalCompositeOperation = "destination-over"; gcox.fillRect(180, 50, 85, 60); </script> </body> </html>
Result
