Kai Meredith

Personal Project / Creative

Flipbook Animator

JavaScript HTML Canvas GIF Export Try it here →
The Mission A frame-by-frame animation tool that runs entirely in the browser. Draw across multiple frames with pen, eraser, fill, line, shape, and select tools. Preview animations in real time with adjustable FPS and export finished animations as GIFs.

Key Engineering Challenges

  • Onion skinning without bleed: The visible canvas and a separate clean drawing canvas are kept in sync — onion skin from the previous frame is composited only on the display layer, never written into the frame's actual pixel data.
  • Per-frame undo history: Each frame maintains its own independent history stack capped at 50 states, so undoing on frame 3 never affects frame 7.