tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

1873708-emoji-canvas-filter-ref.html (775B)

      1 <!doctype html>
      2 
      3 <p>The same 5 gray emoji should be present and unclipped on all 3 lines:</p>
      4 <canvas id=c width=400 height=200></canvas>
      5 
      6 <script>
      7 const x = c.getContext('2d');
      8 x.filter = 'invert(.5)';
      9 x.font = '50px monospace';
     10 const chWidth = x.measureText('x').width;
     11 const emojiWidth = x.measureText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}').width;
     12 // First line
     13 x.fillText('x', 0, 50);
     14 x.fillText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}', chWidth, 50);
     15 // Second line
     16 x.fillText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}', chWidth, 100);
     17 x.fillText('x', chWidth + emojiWidth, 100);
     18 // Third line
     19 x.fillText('x', 0, 150);
     20 x.fillText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}', chWidth, 150);
     21 x.fillText('x', chWidth + emojiWidth, 150);
     22 </script>