From Intern Project to Production: How I Shipped the Draw Tool for Canva's Present Mode

Summary

Canva engineers developed and shipped a real-time drawing tool for presentation mode after user feedback highlighted it as a highly requested feature. Integrating the existing editor-bound draw functionality into presentations required resolving tight package coupling, dual-window scaling mismatches, and performance regressions. To overcome architectural boundaries, core draw logic was extracted into a shared common package using interface abstractions. Coordinate normalization resolved positioning and scaling differences across presenter and audience views, while code-splitting deferred loading the core engine until activation. As a result, presentation load time regression dropped from 7% to 0.24%, and the feature reached over 470,000 monthly active users in production.

Context

Canva users requested the ability to draw during presentations, but the existing draw tool was tightly coupled to Canva's editor package, making it inaccessible to the presentation package due to package dependency rules. Additionally, integrating the tool into Presenter View led to coordinate scaling discrepancies across dual presenter and audience windows, while upfront initialization caused a 7% increase in presentation load time.

Approach / What changed

The engineering team extracted the core drawing logic into a new reusable package using interfaces and abstractions to decouple domain-specific logic. Dual-window display mismatches were resolved by normalizing drawing coordinates into a generalized coordinate system and scaling them by each window's zoom factor before rendering. To fix the performance regression, code-splitting and lazy loading were implemented so only the draw activation button loaded upfront, deferring the heavy drawing engine until clicked.

Takeaways

• Extracting core logic into a shared common package with interface abstractions prevented cyclic package dependencies and decoupled editor-specific features from presentation mode.
• Normalizing draw strokes to a generalized coordinate system and scaling by window-specific zoom factors ensured accurate stroke rendering across dual presentation windows.
• Implementing lazy loading and code splitting for the draw package reduced presentation load time regression from 7% to 0.24% by deferring heavy assets until user activation.

Related reading

• Canva · Jun 20, 2025

  Measuring Commercial Impact at Scale at Canva

  Canva needed a scalable, standardized way to calculate the commercial impact of thousands of annual experiments on key business metrics like Monthly Active Users and Annual Recurring Revenue. Previously, disparate teams spent over six hours per experiment performing manual, error-prone calculations across fragmented spreadsheets and inconsistent data models. To resolve this, Canva built the IMPACT app using Snowflake, Streamlit, Snowpark, and Cortex to provide a self-serve platform tied directly to its central finance model. The application scales local uplift by actual audience exposure and supports pre-experiment scenario modeling alongside post-experiment tracking. A custom deployment workflow generates pull-request-isolated Streamlit environments in Snowflake stages, reducing time-to-insight to under ten minutes while enabling multiple developers to safely build and demo features in parallel.

  Jun Ye

• Canva · Jan 28, 2025

  Image replacement in Canva designs using reverse image search