Advanced Digital Whiteboard
Feature-rich browser whiteboard with layers, undo/redo, and PNG export.
このツールについて
Advanced Digital Whiteboard is a full-featured drawing canvas that runs entirely in your browser. Choose from a pen, highlighter, eraser, straight line, rectangle, circle, or text tool. Adjust stroke color and brush size for any tool. Work with multiple layers — add, rename, toggle visibility, and reorder them. An unlimited undo/redo stack lets you step back through every action. When finished, export the full canvas as a PNG, or clear it with one click.
使い方
- 1 Select a drawing tool from the toolbar (pen, line, shape, text, etc.).
- 2 Pick a color and adjust the brush size.
- 3 Draw on the canvas with your mouse or touch input.
- 4 Add and manage layers using the Layers panel on the right.
- 5 Use Undo / Redo to step through changes, then export as PNG when done.
How a digital whiteboard draws
This whiteboard is an HTML <canvas> — a grid of pixels your browser lets JavaScript paint on directly. When you press the mouse and drag, the tool reads the pointer position relative to the canvas and draws short line segments between successive points, joining them with rounded caps so a continuous stroke looks smooth rather than jagged. Because the result is a raster image (pixels, not shapes), a stroke becomes part of the picture the moment you finish it; there are no editable objects to select afterward, which is exactly why a working layer model and an undo history matter so much. Everything happens locally in your browser: nothing you draw is uploaded, and the board needs no network connection at all.
The seven tools and what each one really does
- Pen draws a solid opaque stroke in your chosen color at full opacity.
- Highlighter draws the same path but at about 35% opacity, so overlapping passes build up and underlying ink still shows through — just like a real highlighter over text.
- Eraser does not paint white; it uses a destination-out compositing mode that removes pixels, making them genuinely transparent. This is why erasing on a layer reveals whatever is on the layers beneath it, not a white hole.
- Line, Rectangle, and Circle are "rubber-band" shapes: while you drag, the tool repeatedly restores a snapshot of the layer and redraws the shape from your start point to the cursor, so you see a live preview that only commits when you release.
- Text drops a small input box where you click; type and press Enter to stamp the text onto the canvas. The font size scales with the brush-size slider (roughly three times the line width), so a thicker brush gives bigger text.
The color picker and the size slider (1–40 pixels) feed all of these. For the eraser, the slider controls how wide an area you remove.
Why layers change everything
Each layer is its own transparent canvas, and the board composites them top to bottom over a white background to produce what you see. The payoff is that work on one layer never disturbs another. A practical workflow: put a rough diagram on Layer 1, add a second layer for annotations and arrows, and a third for labels. If you decide the annotations are wrong, hide or delete that layer and the diagram underneath is untouched. You can toggle any layer's visibility with the eye icon, select which layer you are drawing on, and add or remove layers from the panel. Because the eraser only affects the active layer, you can scrub freely without fear of wrecking a layer you spent time on.
A worked example: a labeled flow diagram
Suppose you are sketching a three-box process. Select the Rectangle tool, set the color to blue and size to 4, and drag out three boxes on Layer 1 — each one previews as you drag and commits on release. Switch to the Line tool and connect them with arrows. Add a new layer, pick the Highlighter in yellow, and shade the middle box to mark it as the current step; the highlight is semi-transparent so the box outline stays visible. Add one more layer, choose Text, click under each box, and type a label. If a label lands in the wrong place, press Undo — the history holds up to 100 steps and rewinds every layer together — reposition, and continue. When it looks right, click Export PNG to download the flattened image.
Undo, redo, and export
Before every stroke, shape, text stamp, clear, the board snapshots all layers onto an undo stack (capped at 100 entries). Undo restores the previous snapshot across every layer and pushes the current state onto a redo stack, so you can step backward and forward freely. The catch worth knowing: this history lives only in memory for the current session. Unlike some other tools on this site, the whiteboard does not persist to local storage, so a page refresh starts a blank board. Export your work to PNG before you leave. The export flattens the visible layers (hidden layers are excluded) onto the white background and saves a standard image you can drop into documents, slides, or chat.
Common mistakes
- Drawing on the wrong layer. If a new stroke seems to vanish, you are probably painting on a hidden or non-active layer. Check which layer is selected before you draw.
- Expecting to move a shape later. Shapes are pixels, not objects. To reposition one, undo and redraw rather than hunting for a handle that isn't there.
- Forgetting to export. There is no autosave. Refreshing or closing the tab loses the board, so export the PNG as soon as you have something worth keeping.
- Using the eraser as white-out over multiple layers. The eraser only clears the active layer; content on other layers stays put.