From SVG to Canvas – part 2: a new way of building interactions

The transition from SVG to Canvas in rendering elements enabled improved performance and interaction handling in Felt, a mapping application. Initially, SVG and React were used, but complexities arose due to performance issues and interactivity limitations, particularly when managing element interactions and maintainability. A new interaction system was developed, decoupling interactions from rendering and each other, allowing for more efficient handling of complex interactions without being tied to React or a specific rendering system. This system introduced a behavior-centric approach, using per-state interaction handlers, which simplified the architecture and improved performance by reducing resource allocation. The new method allowed for seamless interactions such as dragging elements through unselected items while still enabling selection, which was previously challenging with a DOM-centric approach. Despite some trade-offs, like adjusting to an app-wide interaction context and optimizing browser-native performance, the new system offers a cleaner, more maintainable codebase. This change aims to enhance the user experience by allowing developers to focus more on feature development and less on handling intricate interaction bugs.