paint2d-composite-ref.html (1295B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 canvas { display: inline-block; } 6 </style> 7 </head> 8 <body> 9 <canvas id="source-over" width="80" height="80"></canvas> 10 <canvas id="source-in" width="80" height="80"></canvas> 11 <canvas id="source-out" width="80" height="80"></canvas> 12 <canvas id="source-atop" width="80" height="80"></canvas> 13 <br> 14 <canvas id="destination-over" width="80" height="80"></canvas> 15 <canvas id="destination-in" width="80" height="80"></canvas> 16 <canvas id="destination-out" width="80" height="80"></canvas> 17 <canvas id="destination-atop" width="80" height="80"></canvas> 18 <br> 19 <canvas id="lighter" width="80" height="80"></canvas> 20 <canvas id="xor" width="80" height="80"></canvas> 21 <script> 22 var compositeOps = [ 23 'source-over', 24 'source-in', 25 'source-out', 26 'source-atop', 27 'destination-over', 28 'destination-in', 29 'destination-out', 30 'destination-atop', 31 'lighter', 32 'xor' 33 ]; 34 35 for (var i = 0; i < compositeOps.length; i++) { 36 var op = compositeOps[i]; 37 var ctx = document.getElementById(op).getContext('2d'); 38 ctx.fillStyle = 'red'; 39 ctx.fillRect(5, 5, 40, 40); 40 41 ctx.globalCompositeOperation = op; 42 43 ctx.fillStyle = 'deepskyblue'; 44 ctx.beginPath(); 45 ctx.arc(45,45,20,0,Math.PI*2,true); 46 ctx.fill(); 47 } 48 </script> 49 </body> 50 </html>