Build custom emojis with Stimulus

This article was originally published on Rails Designer Blog Recently I had to build something using the canvas element. Today I'll show you how to build an interactive emoji composer using HTML Canvas and Stimulus. Click emojis to add them to a canvas, drag them around and export your creation as an image. It is quite fun (coming from an emoji connoisseur)! 😎👍 Click a face emoji, add some accessories, position everything just right and download your custom creation. All running in the browser with no external dependencies. View the full code on GitHub The HTML Start with a simple layout that divides the screen into a canvas area and emoji picker: <div data-controller="canvas-composer image-exporter"> <div class="grid grid-cols-[1fr_clamp(240px,12%,480px)] gap-8"> <div> <canvas data-canvas-composer-target="canvas" width="300" height="300" data-action="mousedown->canvas-composer#selectEmoji mousemove->canvas-composer#moveSelectedEmoji mouseup->canvas-comp