1304353-text-global-composite-op-1.html (609B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function test() { 6 var c = document.getElementById("c"); 7 var ctx = c.getContext("2d"); 8 ctx.fillStyle = "green"; 9 ctx.fillRect(0, 0, 300, 150); 10 ctx.fillStyle = "red"; 11 ctx.font = "36px sans-serif"; 12 ctx.globalCompositeOperation = "destination-out"; 13 ctx.fillText("HELLO", 50, 50); 14 ctx.rect(0, 75, 300, 75); 15 ctx.clip(); 16 ctx.globalCompositeOperation = "destination-atop"; 17 ctx.fillText("WORLD", 50, 120); 18 } 19 </script> 20 </head> 21 <body onload="test()"> 22 <canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas> 23 </body> 24 </html