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