Investigations

Canvas Drawing Presenter

HTML October 2024

A multi-page HTML canvas drawing app with sequential line animation and presentation mode, built as a Cursor AI experiment.

This was an experiment in a different direction — I wanted to see what kind of working application an AI-powered editor (Cursor) could generate, and what architectural decisions it would make when given relatively open-ended requirements.

The result is a single-file HTML application with a canvas drawing tool that has some genuinely useful features: multi-page support with navigation, smoothness controls for drawn lines, SVG shape insertion, and a presentation mode that plays back your drawings as sequential line animations.

The presentation mode is the interesting bit. You draw on multiple pages, toggle "presentation," and the app replays each line stroke by stroke in the order you drew them. It's like a whiteboard recording without the video overhead.

I was curious about the code quality and architecture that emerges from AI-assisted development. The answer: it works, it's readable, but it makes different trade-offs than I would. Everything in one file, minimal abstraction, very procedural. Which, for a tool like this, is arguably the right call.

What this project demonstrates

Multi-page canvas drawing with page navigation
Sequential line animation for presentation playback
Smoothness controls for drawn lines
SVG shape insertion support
Single self-contained HTML file
Exploration of AI-assisted code generation with Cursor

Technologies

CanvasDrawingAnimationCursor AIExperiment

© 2026 Jonathan Leahy · v0.8.5