Emoji to Image

by Matt

HTML

<img id="img" height="100" />

JavaScript

function characterToDataURL(text, size = 64) {
	const canvas = document.createElement("canvas")
	canvas.width = size
	canvas.height = size

	const ctx = canvas.getContext("2d")
	ctx.font = `${size}px sans-serif`

	const {
		actualBoundingBoxRight,
		actualBoundingBoxLeft,
		actualBoundingBoxDescent,
		actualBoundingBoxAscent,
	} = ctx.measureText(text)

	const centerX = 0.5 * (actualBoundingBoxRight - actualBoundingBoxLeft)
	const centerY = 0.5 * (actualBoundingBoxDescent - actualBoundingBoxAscent)

	ctx.fillText(text, size / 2 - centerX, size / 2 - centerY)

	return canvas.toDataURL()
}

img.src = characterToDataURL('💯', 100)