Build a Canvas Drawing Board | Interview Question

Q: Build a Canvas Drawing Board

**Target Audience:** Frontend candidates preparing for a hard machine coding round. Assumes React hooks; the Canvas 2D API, Pointer Events and the history model are explained from zero. **Difficulty:** Hard > **How to read this doc:** Each idea is explained in plain words, then tagged with 📌 Interview term: . The output in section 6 comes from running the solution on React 19.3.1: the history logic in jsdom with a recording fake 2D context, and the real pixels in headless Chromium 141. ## 1. Why This Even Matters — A Story First Imagine two ways to keep a diary of a painting. In the first, you photograph the canvas after every brush stroke and keep a shoebox of photos; undo means "pull out the previous photo". In the second, you write down each stroke ("red, 6 px, from here to here to here"); undo means "cross out the last line and repaint from the list". The shoebox gets heavy fast: an 800 × 500 canvas at double density is 1600 × 1000 pixels × 4 bytes, about 6.4 MB pe

The problem

Question presented to candidate: "Build a simple drawing board, like a whiteboard: the user draws freehand on a <canvas> with a mouse, pen or finger, picks a colour and a brush size, can switch to an eraser, and has Undo, Redo and Clear buttons plus Ctrl+Z / Ctrl+Shift+Z. Finally they can export the drawing as a PNG. Walk me through how you store the drawing so that undo works."

Requirements:

A canvas that stays sharp on high-density screens and scales with its container.
Freehand strokes with Pointer Events (mouse, pen, touch); a tap draws a dot.
Colour swatches, a size slider (2 to 40 px) and an eraser.
Undo, Redo and Clear, where Clear itself can be undone; a new stroke after an undo discards the redo history.
Keyboard shortcuts Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z (or Ctrl+Y).
Export to PNG on a white background, offered as a download link.

What a strong answer should cover:

Strokes stored as data (colour, size, tool, points) rather than pixel snapshots, and why that makes undo, redo and redraw cheap and exact.
Two stacks (done / undone) and the rule that any new action clears redo; Clear modelled as an action.
Drawing the live stroke incrementally from a ref or plain variable (no re-render per pointermove), then a full repaint from data on commit, undo or redo.
setPointerCapture, touch-action: none, getCoalescedEvents() for smooth fast strokes, and mapping client coordinates to canvas coordinates.
devicePixelRatio scaling, destination-out for the eraser, and compositing on white for export.
Trade-offs: replay cost for very long histories (snapshots or an offscreen cache), and memory if you stored ImageData instead.

Clarifying questions expected:

"How long can a session get? Thousands of strokes changes the redraw strategy."
"Should the drawing survive a reload, or be shared live with other users?"
"Does the eraser need to erase to transparent or to the background colour?"

Code / implementation expected: Yes. A working board with pointer drawing, stroke history with undo / redo / clear, tools and export.

React
Canvas
Pointer

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a hard machine coding round. Assumes React hooks; the Canvas 2D API, Pointer Events and the history model are explained from zero. Difficulty: Hard

How to read this doc: Each idea is explained in plain words, then tagged with 📌 Interview term:. The output in section 6 comes from running the solution on React 19.3.1: the history logic in jsdom with a recording fake 2D context, and the real pixels in headless Chromium 141.

1. Why This Even Matters — A Story First

Imagine two ways to keep a diary of a painting. In the first, you photograph the canvas after every brush stroke and keep a shoebox of photos; undo means "pull out the previous photo". In the second, you write down each stroke ("red, 6 px, from here to here to here"); undo means "cross out the last line and repaint from the list".

The shoebox gets heavy fast:

The solution is hidden so you can try first

15 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import DrawingBoard from "./src/components/DrawingBoard";

export default function App() {
  return (
    <main className="app">
      <h1>Drawing board</h1>
      <DrawingBoard />
      <p className="hint">
        Draw with a mouse, pen or finger. Ctrl+Z undoes, Ctrl+Shift+Z or Ctrl+Y
        redoes.
      </p>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.