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

[Canva](https://yomu.fyi/company/canva) · Edwina Adisusila · Aug 6, 2025

**Type:** Problem & solution

## 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.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Performance](https://yomu.fyi/topic/performance), [Refactoring](https://yomu.fyi/topic/refactoring)

[Read original post](https://www.canva.dev/blog/engineering/draw-in-present-mode)