Post

Have you seen our Olympic medal count visualization? BTW: To generate the Olympic medal scarfs, we render it on HTML canvas. A powerful drawing technology, but inherently non-interactive. We wanted the medals to be clickable. So: How do you render an interactive canvas? A technical deep-dive #Svelte

A canvas is a drawing area in the browser where you add your image pixel by pixel. In contrast to SVG, there are no ready-to-use elements such as circles and lines. And so you also cannot put click handlers on elements – like our medal visualizations.

What you can do: Add a second, invisible canvas that only shows the medals. Each in a unique color. Under the hood, you know, which color stands for which medal. So here, we use different shades of red for each medal.

When a user now hovers or clicks over a medal, we're asking for the color beneath the pointer. So, for example, we know that the user is hovering over the red shade rgb(144,1,0). Then we take our look-up table and find out which medal that is.

With this trick, we know again, which element (medal) a user is hovering over or clicking on.

With Svelte you can package this logic into a new component <InteractiveCanvas>, including mousemove and click handlers.

Within InteractiveCanvas.svelte we build up two canvases where the first is the real visible canvas, the knitting pattern. And the second is the identification canvas. Invisible to the users, but crucial for the event handlers.

<Canvas> itself is another Svelte component that makes it possible to describe canvas content in a descriptive way. That's what we call renderless components. We have already used this principle in this open-sourced story code here: github.com/spiegelgraph...

And here is the link to our Olympic medal count article (gift link for the first 10 clicks): www.spiegel.de/sport/olympi...

And my original post about this article: bsky.app/profile/higs...