2d.composite.full.mode.alpha.html (1411B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="match" href="2d.composite.full.mode.alpha-ref.html"> 5 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10000" /> 6 </head> 7 <body> 8 <div id="source"></div> 9 <div id="destination"></div> 10 <script> 11 function createCanvas(parent, width, height) { 12 const canvas = document.createElement("canvas"); 13 canvas.width = width; 14 canvas.height = height; 15 parent.append(canvas); 16 return canvas; 17 } 18 19 function fillRects(canvas, alpha, compositeOperation) { 20 const ctx = canvas.getContext("2d"); 21 ctx.fillStyle = "#777777"; 22 ctx.fillRect(10, 10, 100, 100); 23 ctx.fillRect(110, 110, 100, 100); 24 25 ctx.globalCompositeOperation = compositeOperation; 26 ctx.globalAlpha = alpha; 27 ctx.fillStyle = "#ff0000"; 28 ctx.fillRect(60, 60, 100, 100); 29 } 30 31 fillRects(createCanvas(source, 200, 200), 0.5, 'source-in'); 32 fillRects(createCanvas(source, 200, 200), 0.5, 'source-out'); 33 fillRects(createCanvas(destination, 200, 200), 0.5, `destination-in`); 34 fillRects(createCanvas(destination, 200, 200), 0.5, 'destination-atop'); 35 </script> 36 </body> 37 </html>