Online Whiteboard

An online whiteboard has to do two very different things at once. It must feel like a marker on glass — instant, fluid, forgiving of a shaky hand — while also behaving like a document you can edit, rearrange and export cleanly. This tool solves that with a single unified vector scene: every mark on the board, from a rectangle to a freehand pen stroke, is a structured object rather than a patch of pixels. Understanding how that one scene is stored, edited and exported explains why every element stays editable, why the pen still feels natural, and why the exports come out crisp at any size.

The Scene: Everything is Data, Not Pixels

When you draw a rectangle, an arrow, a sticky note, a line of text or a freehand stroke, the board does not "paint" it onto a fixed grid of dots. It records an object — its kind, position, size, color, stroke width, line style and fill — in an ordered list called the scene. Because each element is data, you can later select it, move it, rotate it, recolor it, change its stacking order, or delete it without disturbing anything underneath. Every frame, the tool redraws the whole scene from this list onto an HTML <canvas>, so what you see is always a faithful picture of the underlying data.

Hit-Testing: Knowing What You Clicked

Selecting an object requires answering a geometric question: is the cursor on this shape? The tool uses exact hit-testing per kind. Rectangles, sticky notes and images test against their bounding box; ellipses use the ellipse equation; triangles and diamonds use a point-in-polygon test; and open shapes — lines, arrows, connectors and freehand strokes — measure the perpendicular distance from the cursor to each segment, widened by the stroke thickness so thin lines are still easy to grab. Objects are tested from top to bottom, so a click always selects the one visually on top. The same hit-testing powers the object eraser: instead of scrubbing away pixels, it finds the whole stroke or shape under the cursor and removes it in one piece.

Smooth Freehand Strokes as Vectors

Freehand drawing is different from placing a shape, but the result is still a vector object. A pointer emits a stream of positions, and connecting them with straight segments would look visibly jagged. To keep the line smooth, the stroke is drawn through the midpoints of consecutive samples using quadratic curves, and a Catmull-Rom spline from the shared geometry library rounds the path where it needs to be resampled. The finished stroke is stored as a draw object — a smoothed point list — which means a pen or highlighter line is fully selectable, movable, recolorable, rotatable and reorderable like any other object. The highlighter is simply a wider, semi-transparent stroke; there is no separate pixel surface anywhere in the pipeline.

Arranging, Rotating and Grouping

Because every mark is an object, the board offers real editing power over your layout. Select something and a rotation handle appears above it — drag to rotate, and hold Shift to snap to 15° steps; it works for shapes, text, sticky notes and images alike. Select several objects at once to align and distribute them, or resize the whole selection together (hold Shift to keep proportions). Z-order controls bring an object to front, forward, backward or to back; you can group and ungroup objects so they move as one; and you can lock an object to protect it from moving, resizing or editing. A quick rough sketch can be tidied automatically by smart shape recognition, which snaps a scribble to a clean shape. While you draw, snapping to other objects' edges and centers shows alignment guides, and an optional dot grid and rulers keep everything tidy. Zoom with the mouse wheel and pan with the space bar or a middle-drag to move around a large board.

Exporting: One Scene, Four Formats

All exports flow from a single serialized description of the board, and because that description is entirely vector, so are the exports. For SVG, the scene is turned into a standalone vector document: every element becomes a real SVG element — a rectangle is a rect, an ellipse an ellipse, a triangle or diamond a polygon, a line a line, and a freehand stroke a path, alongside text and image. There is no flattened image anywhere in the file, so the SVG scales to any size with no loss and opens for editing in tools like Inkscape or Illustrator. For PNG and PDF, that same vector SVG is drawn onto an off-screen canvas at your chosen output size and read back as a flat image; the PDF simply embeds that image on a single page. Output dimensions are computed by a sizing engine that supports exact pixels, a 2× option, and print sheets (A4/A3 at 300 DPI), always clamped to a memory-safe ceiling so an over-large request never produces a blank canvas on mobile browsers. You can also copy the board to your clipboard as a PNG for an instant paste into another app. Finally, the JSON export writes the whole scene to a file you can reopen to continue editing; on load it is validated so a corrupt or older file can never load a broken board.

Autosave, Fullscreen and Keyboard Flow

Because losing a sketch is painful, the board debounces a copy of the current scene to your browser's local storage after each change, and offers to restore it the next time you visit — entirely on your device, with no account. A native fullscreen mode expands the canvas to fill the screen for focused work, and there is also a dedicated full-screen whiteboard if you prefer to start immersive. Single-key shortcuts (pen, highlighter, eraser, shapes, text) plus the familiar undo/redo chords, layering with Ctrl+] and Ctrl+[, group with Ctrl+G, lock with Ctrl+Shift+L, Delete to remove a selection, and arrow keys to nudge keep your hands on the drawing rather than the menus.

Practical Tips

• Use the pen for notes and the highlighter to emphasize without hiding what is underneath — both stay editable, so you can recolor or move a stroke later.
• Reach for shapes, connectors and sticky notes when you want tidy diagrams — set a dashed or dotted line style, choose the arrowheads, and re-point a connector at any time.
• Group the parts of a diagram so they move together, and lock a background image so you can annotate over it without nudging it.
• Export SVG for anything you might print large or embed in a document; use PNG for a quick share, PDF for a printable single page, or copy straight to the clipboard.
• Save a JSON scene for work in progress so you can pick up exactly where you left off.