온라인 화이트보드

What an HTML5 canvas whiteboard actually is

This whiteboard is a single <canvas> element — a fixed grid of pixels that your browser lets JavaScript paint onto directly. When you drag the pen, the tool reads your pointer position, converts it from screen coordinates into canvas coordinates, and draws short line segments between successive points with rounded caps and joins so the stroke looks smooth. Nothing about your drawing leaves your device: the image lives entirely in the canvas's pixel buffer in memory, which is also why you can keep working with the network switched off. There is no account, no cloud sync, and no upload — the trade-off is that closing the tab discards the board unless you download it first.

Raster, not vector — and why it matters

A key thing to understand is that this is a raster canvas. Once you draw a rectangle, it becomes a permanent arrangement of coloured pixels, not a movable object you can later select and resize. That has practical consequences. The eraser does not delete a shape; it paints white over whatever is underneath, which is why erasing on a coloured background would leave white smudges (the board assumes a white page). Shapes are previewed live: while you drag a rectangle, the tool restores a snapshot of the canvas and redraws the shape on every mouse move, so you see it follow your cursor, and only commits it when you release.

How undo, redo, and the 20-step limit work

Every time you finish a stroke, shape, or text insertion, the board saves a snapshot of the entire canvas as a data URL and pushes it onto a history stack. Undo pops the latest snapshot onto a redo stack and repaints the previous one; redo reverses that. Because each snapshot is a full image of the board, memory adds up, so the history is capped at about 20 steps — the oldest snapshot is dropped once you exceed it. Two consequences follow: you cannot undo past 20 actions, and starting a brand-new stroke clears the redo stack, so anything you undid is gone the moment you draw again.

The tools, briefly

The text tool sizes its font at roughly three times the brush slider value (with a sensible minimum), so a larger brush also means larger lettering.

Practical tips

• Hold a steady hand for shapes. Since line, rectangle, and circle are defined by where you press and where you release, drag in one smooth motion. The circle is drawn as an ellipse bounded by your drag box, so a square drag gives a true circle.
• Download before you close. The "Download PNG" button exports exactly what is on the canvas at full resolution. There is no autosave, so treat the download as your save button.
• Use a custom colour for precise work. The swatches cover common needs, but the colour input next to them accepts any hex value if you are matching a brand or diagram palette.
• Resize matters. The canvas re-sizes itself to fit the window and restores your last snapshot when it does, but very aggressive resizing can soften edges as the saved image is scaled back in.

Common mistakes and pitfalls

• Expecting to move a shape later. You can't — it's pixels. Plan placement, or undo and redraw.
• Erasing over a non-white area. The eraser writes white, not transparency, so it only "disappears" against the white page.
• Relying on deep undo. The 20-step cap and the redo-clearing behaviour mean undo is for recent slips, not a full history. For anything important, export intermediate versions.
• Forgetting touch works too. The board listens for touch events, so a tablet and stylus give far better freehand control than a mouse for sketching and handwriting.