2d.composite.full.mode.alpha-ref.html (1364B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <div id="source"></div> 5 <div id="destination"></div> 6 <script> 7 function createCanvas(parent, width, height) { 8 const canvas = document.createElement("canvas"); 9 canvas.width = width; 10 canvas.height = height; 11 parent.append(canvas); 12 return canvas; 13 } 14 15 function fillRects(canvas, color, alpha, diagonal) { 16 const ctx = canvas.getContext("2d"); 17 ctx.fillStyle = color; 18 ctx.globalAlpha = alpha; 19 if (diagonal == "left") { 20 ctx.fillRect(60, 60, 50, 50); 21 ctx.fillRect(110, 110, 50, 50); 22 } else { 23 ctx.fillRect(60, 110, 50, 50); 24 ctx.fillRect(110, 60, 50, 50); 25 } 26 } 27 28 fillRects(createCanvas(source, 200, 200), "#ff0000", 0.5, "left"); 29 fillRects(createCanvas(source, 200, 200), "#ff0000", 0.5, "right"); 30 fillRects(createCanvas(destination, 200, 200), "#777777", 0.5, "left"); 31 32 let canvas = createCanvas(destination, 200, 200); 33 fillRects(canvas, "#777777", 0.5, "left"); 34 fillRects(canvas, "#ff0000", 0.5, "right"); 35 </script> 36 </body> 37 </html>