Section 1.1: Implementation Overview

Prerequisites: To begin, insert the following CSS within the <style> tags at the top of your HTML document:

body {

padding: 5% 15%;

}

.emoji {

font-family: Segoe UI Emoji !important;

}

Step 1: Initialize a Canvas using JavaScript

var emojiClass='emoji'; // Default CSS class

var icon = '😀'; // Default emoji displayed

var _scale=window.devicePixelRatio*2;

var w=96, h=96, fontSize, canvas, ctx, _x, _y;

canvas = document.createElement('canvas');

document.body.appendChild(canvas);

canvas.width = w;

canvas.height = h;

fontSize = h / _scale;

canvas.style.margin = '1px auto';

canvas.style.width = ${w / _scale}px;

canvas.style.height = ${h / _scale}px;

ctx = canvas.getContext('2d');

ctx.scale(_scale, _scale);

Important: When working with Canvas elements, ensure that the correct scaling is applied to avoid low-resolution image rendering.

Step 2: Configure Canvas Properties

ctx.font = ${fontSize}px ${ (emojiClass=='emoji') ? 'Segoe UI Emoji' : emojiClass };

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.globalAlpha = 1.0;

To render a custom emoji on the canvas, create an input element like so:

const inputIcon = document.createElement('input');

inputIcon.value = icon;

document.body.appendChild(inputIcon);

inputIcon.addEventListener('input', (evt) => {

icon = evt.target.value;

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillText(icon, _x, _y);

});

At this stage, any new emoji input will reflect on the canvas dynamically.

Video: Emojis in HTML, CSS, and JS - This video provides an overview of how to utilize emojis effectively in your web projects.

Section 1.2: Importing Custom Font Emojis

Download an older version of the Windows font emoji and rename it to seguiemj-win8.ttf. Place this file within a nested folder named fonts located in the css directory. Add the following CSS to your <style> tags:

@font-face {

font-family: EmojiFontWin8;

src: url(css/fonts/seguiemj-win8.ttf);

}

.EmojiFontWin8 {

font-family: EmojiFontWin8 !important;

}

Change the emojiClass variable to use the new font:

var emojiClass = 'EmojiFontWin8'; // Default CSS class

To demonstrate how the emoji display changes between the default and custom font, you can use a utility function:

function triggerEvent(el, type) {

let e = (('createEvent' in document) ? document.createEvent('HTMLEvents') : document.createEventObject());

if ('createEvent' in document) {

e.initEvent(type, false, true);

el.dispatchEvent(e);

} else {

e.eventType = type;

el.fireEvent('on' + e.eventType, e);

}

}

(async () => {

await new Promise((resolve) => setTimeout(resolve, 2000));

triggerEvent(inputIcon, 'input');

})();

Demo: The above code allows you to see how the smiley changes from the default OS design to the specified custom font.

Video: Make Your Website Stand Out With Emojis - This video explains how to incorporate emojis into your web design to make it more engaging.

Section 1.3: Conclusion

In this article, we explored how to create a web application that allows users to export emojis as images, independent of platform. For a complete source code of the web application, feel free to visit my GitHub repository — emoji2image or try out the demo!

Thank you for reading! I hope you found this guide helpful. If you're interested in more content on Geographic Information Systems (GIS), Data Analytics, or web application development, consider following me on Medium.

— 🌮 Please buy me a Taco ξ(🎀˶❛◡❛) For additional articles, please check out the links below:

• Render and export symbols
• Extract TTF files from PDF