rattrayalex/index.html

## index.html
<html>
  <body>
    <div class="has-emoji">Hello world! I'm a unicorn: 🦄</div>

    <script>
      // Stolen from Modernizr: https://github.com/Modernizr/Modernizr/blob/v3.5.0/feature-detects/emoji.js
      const hasEmojiSupport = () => {
        var pixelRatio = window.devicePixelRatio || 1;
        var offset = 12 * pixelRatio;
        var node = document.createElement('canvas');
        var ctx = node.getContext('2d');
        ctx.fillStyle = '#f00';
        ctx.textBaseline = 'top';
        ctx.font = '32px Arial'; // Replace with the fonts you use, if they have better emoji support
        ctx.fillText('🦄', 0, 0); // Replace with an emoji whose support you care about
        return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
      }

      if (!hasEmojiSupport()) {
        console.log('emoji unsupported');

        // Inserts https://twemoji.twitter.com/
        const twemojiEl = document.createElement("script");
        twemojiEl.src = "https://twemoji.maxcdn.com/v/13.0.1/twemoji.min.js";
        twemojiEl.onload = () => {
          document.querySelectorAll('.has-emoji').forEach(el => { // Replace with selectors you care about.
            twemoji.parse(el);
          });
        }
        document.body.appendChild(twemojiEl);
      } else {
        console.log('emoji supported')
      }
    </script>
  </body>
</html>
	<html>
	<body>
	<div class="has-emoji">Hello world! I'm a unicorn: 🦄</div>

	<script>
	// Stolen from Modernizr: https://github.com/Modernizr/Modernizr/blob/v3.5.0/feature-detects/emoji.js
	const hasEmojiSupport = () => {
	var pixelRatio = window.devicePixelRatio \|\| 1;
	var offset = 12 * pixelRatio;
	var node = document.createElement('canvas');
	var ctx = node.getContext('2d');
	ctx.fillStyle = '#f00';
	ctx.textBaseline = 'top';
	ctx.font = '32px Arial'; // Replace with the fonts you use, if they have better emoji support
	ctx.fillText('🦄', 0, 0); // Replace with an emoji whose support you care about
	return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
	}

	if (!hasEmojiSupport()) {
	console.log('emoji unsupported');

	// Inserts https://twemoji.twitter.com/
	const twemojiEl = document.createElement("script");
	twemojiEl.src = "https://twemoji.maxcdn.com/v/13.0.1/twemoji.min.js";
	twemojiEl.onload = () => {
	document.querySelectorAll('.has-emoji').forEach(el => { // Replace with selectors you care about.
	twemoji.parse(el);
	});
	}
	document.body.appendChild(twemojiEl);
	} else {
	console.log('emoji supported')
	}
	</script>
	</body>
	</html>