colr-glyph-composition-ref.html (1288B)
1 <html> 2 <meta charset="utf-8"> 3 <style> 4 canvas { 5 margin: 5px; 6 } 7 </style> 8 <script> 9 src = document.createElement("canvas"); 10 src.width = "100"; 11 src.height = "100"; 12 scx = src.getContext("2d"); 13 scx.font = "64px Segoe UI Emoji, sans-serif"; 14 scx.fillText("\u{1F63A}",5,65); 15 16 function test(op) { 17 cv = document.createElement("canvas"); 18 cv.width = "100"; 19 cv.height = "100"; 20 document.body.appendChild(cv); 21 cx = cv.getContext("2d"); 22 cx.fillStyle = "#888888"; 23 cx.fillRect(0,0,100,50); 24 cx.globalCompositeOperation = op; 25 cx.drawImage(src, 0, 0); 26 } 27 28 function br() { 29 document.body.appendChild(document.createElement("br")); 30 } 31 32 window.onload = ( ) => { 33 test("source-over"); 34 test("source-in"); 35 test("source-out"); 36 test("source-atop"); 37 br(); 38 test("destination-over"); 39 test("destination-in"); 40 test("destination-out"); 41 test("destination-atop"); 42 br(); 43 test("copy"); 44 test("lighter"); 45 test("xor"); 46 test("multiply"); 47 br(); 48 test("screen"); 49 test("overlay"); 50 test("darken"); 51 test("lighten"); 52 br(); 53 test("color-dodge"); 54 test("color-burn"); 55 test("hard-light"); 56 test("soft-light"); 57 br(); 58 test("difference"); 59 test("exclusion"); 60 test("hue"); 61 test("saturation"); 62 br(); 63 test("color"); 64 test("luminosity"); 65 }; 66 </script> 67 <body> 68 </body> 69 </html>