Digital Whiteboard
Draw and sketch on an HTML5 canvas with pen, eraser, colors, and PNG download.
Reviewed by Aygul Dovletova · Last reviewed
Draw with your mouse or finger. Use the toolbar above to switch tools, change colors, and adjust line width.
How to Use the Digital Whiteboard
- Pick a tool in the toolbar: Pen to draw, Eraser to remove strokes. The current mode is highlighted so you can see at a glance which one is active.
- Choose a color from the preset swatches or open the native color picker for an arbitrary hex value - useful when diagramming against a brand palette.
- Adjust line width with the slider between 1 and 20 pixels. Thicker strokes work well for headline shapes, thinner for annotations and labels.
- Draw on the canvas with mouse, trackpad, finger, or stylus. Pointer events are unified, so an Apple Pencil, Wacom tablet, or Surface pen all feel the same.
- Download as PNG when the sketch is ready to hand off. The file is named with a timestamp so successive downloads do not overwrite each other.
- Clear wipes the entire canvas after a confirmation dialog - there is no undo stack, so use Eraser for local mistakes and Clear only when you truly want to restart.
What This Tool Does and How It Works
A digital whiteboard is a 2D spatial canvas where the position of a mark matters as much as the mark itself. This implementation uses an HTML <canvas> element with a 2D rendering context obtained via getContext(\'2d\'). Stroke rendering listens on unified Pointer Events - pointerdown, pointermove, pointerup - rather than separate mouse and touch handlers, which is why it behaves consistently on desktop and tablet. On each move event the tool calls ctx.lineTo() followed by ctx.stroke() with lineCap set to round so strokes taper naturally rather than showing square endpoints.
The eraser is implemented with ctx.globalCompositeOperation = \'destination-out\', which carves alpha-zero pixels instead of painting white - important because it means an eraser stroke reveals the underlying transparent background rather than leaving white scars that become visible if you later save with a transparent PNG. The download button calls canvas.toDataURL(\'image/png\') to produce a data URL and triggers a synthetic anchor click with download attribute to save the file. Because the canvas stores pixels, not paths, there is no vector export - the whiteboard is a raster tool.
When You Would Reach for a Whiteboard
- Sketching a system architecture during a design review - boxes, arrows, and an X over the thing that is broken - when the words cannot carry the layout.
- Explaining a concept one-on-one over a screen share, where drawing the idea takes thirty seconds versus five minutes of typing.
- Brainstorming with sticky-note-like clusters: rough labels scattered on the canvas so the group can see relationships before they are codified.
- Marking up a screenshot or photo that you paste onto the canvas (browsers let you drag an image onto a canvas) with arrows and circles for bug reports.
- Teaching or tutoring math, where handwritten equations and diagrams are faster than any formula editor UI.
- Capturing a fast sketch during a phone call without switching context to a heavier app like Figma or Miro.
Common Pitfalls and Edge Cases
The most common surprise is the absence of undo. Because the tool does not maintain a stroke history, there is no way to retract the last mark - the eraser is the partial fix, and for a clean restart you use Clear. Another issue is high-DPI displays: by default a canvas is rendered at CSS pixel density, which on a Retina screen produces visibly blurry strokes. This implementation scales the backing store to devicePixelRatio to stay crisp. Touch-scroll conflicts on mobile are handled by touch-action: none on the canvas element, so a two-finger drag does not try to pan the page while you are trying to draw. Finally, the PNG download captures whatever is on the canvas at the moment you click the button - no separate layers, no editable state, no way to come back and tweak a specific stroke later. If you need that, you need a vector tool.
Canvas and Whiteboards in Context
The HTML <canvas> element was introduced by Apple for Dashboard widgets in 2004, standardized into HTML5, and is now defined in the HTML Living Standard. It gives JavaScript a raw bitmap with an immediate-mode 2D API (plus WebGL for 3D). Digital whiteboards built on canvas range from simple single-page apps like this tool to heavyweight collaborative products like Miro, FigJam, Mural, and Microsoft Whiteboard, which layer WebSockets, vector storage, infinite panning, and multi-cursor presence on top. The conceptual ancestor is the physical whiteboard that replaced chalk blackboards as meeting-room furniture in the 1990s. The spatial affordance - related ideas near each other, arrows between them - is what all of these inherit.
Comparison to Alternatives
For serious design work, a vector tool - Figma, Sketch, Illustrator, Affinity Designer - is always better because strokes stay editable and files remain scalable. For collaborative whiteboarding, Miro, FigJam, or Excalidraw give you real-time cursors, sticky notes, templates, and persistent boards. macOS Freeform works well on Apple-stack teams. Against these, this browser tool wins on speed: no login, no install, no file name - drawing within two seconds of landing. It loses when you need to return to the sketch tomorrow, share for editing, or scale beyond a single-screen canvas. It is the difference between grabbing a pen on the nearest napkin and opening a CAD program.
Frequently Asked Questions
Why is there no undo button?
Undo requires holding a history of strokes as discrete objects, which turns the tool from a simple pixel canvas into a layered document model and multiplies the code complexity. For a fast-sketch use case, the eraser covers local mistakes and Clear handles a full restart, which is why lightweight canvas whiteboards skip undo. If you need it frequently, a vector-backed tool like Excalidraw has full undo/redo on every stroke.
Does the whiteboard work with an Apple Pencil or Wacom tablet?
Yes. The tool listens to Pointer Events rather than legacy mouse-or-touch events, so any stylus the browser reports - Apple Pencil on iPad Safari, Surface Pen on Edge, Wacom devices - produces the same drawing behavior. Pressure sensitivity is available from pointerEvent.pressure, but this implementation does not currently modulate line width from it, so every stroke is uniform regardless of how hard you press.
How does the eraser work technically?
The eraser does not paint white pixels. It sets the canvas context's globalCompositeOperation to "destination-out", which makes every subsequent draw operation subtract alpha from underlying pixels. Effectively the eraser reveals transparency. This matters because a white-paint eraser would leave visible scars if you later changed the background color or exported as a transparent PNG; destination-out leaves a clean hole.
Why does the download save as PNG instead of JPEG or SVG?
PNG is the right raster format for sketches with flat colors, sharp edges, and large areas of one color - lossless DEFLATE compression and full alpha support. JPEG would add compression artifacts around every stroke edge and does not support transparency. SVG would require storing strokes as vector paths, which this canvas-based tool does not do. For scalable output, a vector-native tool is the correct choice.
Is the whiteboard infinite, or bounded?
Bounded to the visible canvas on the page. There is no panning and no zooming, and a scribble that exits the right edge is clipped. This differs from Miro or FigJam which offer infinite canvas with viewport panning. The bounded approach fits the "one sketch, one PNG" use case this tool targets; for an infinite spatial canvas, those alternatives are the match.
Does the canvas look crisp on high-DPI (Retina) displays?
Yes. The tool scales the canvas backing store to match window.devicePixelRatio - on a 2x Retina display, a 1000-pixel-wide canvas has a 2000-pixel-wide backing store and drawing operations are scaled accordingly. Without that step, every stroke would appear soft because the browser would stretch a 1x bitmap onto 2x pixels. The same scaling makes PNG downloads twice as large on Retina.
Is the sketch saved between sessions?
No. The canvas pixel state is held in the DOM node, and reload or tab close wipes it. There is no localStorage backup because reconstituting a canvas from raw pixels would involve either a large base64 string (pushing against the 5-10 MB quota) or a stroke history (which this tool does not keep). If you care about the result, download the PNG before leaving.
Does the tool send image data to any server?
No. Canvas rendering, the PNG encoding via toDataURL, and the anchor-click download all happen inside your browser. No image bytes leave the page. The only network traffic is the initial static asset load and site-wide analytics on page view, neither of which touches the canvas contents. You can disconnect from the internet after the page loads and keep drawing.
How is this different from the Notes Scratchpad?
The scratchpad is one-dimensional text: characters in a linear stream, keyboard only. The whiteboard is two-dimensional and spatial: position carries meaning, and you draw rather than type. Use the scratchpad for writing, the whiteboard for sketches, arrows, and diagrams where "here is next to there" matters. For mixed text-and-sketch, Excalidraw combines both affordances.
Can I import an image to annotate?
Not through a dedicated Import button. Some browsers allow pasting an image from clipboard, and drag-and-drop onto a canvas can be wired up via the developer console. For serious image annotation - screenshots with arrows, product mock-ups with redlines - a purpose-built markup tool like Skitch, CleanShot X, or macOS Screenshot markup is a better match. This whiteboard targets blank-canvas sketching.
More Productivity
Cover Letter Generator
Generate professional cover letters from a fill-in template with your details and experience.
Open toolEmail Signature Generator
Generate professional HTML email signatures with contact details and social links.
Open toolFlashcard Maker
Create and study flashcards with front/back content, shuffle, and navigation.
Open toolGrammar Checker
Check text for double spaces, repeated words, misspellings, capitalization, and passive voice.
Open toolInvoice Generator
Create professional invoices with line items, tax calculation, and printable output.
Open toolMarkdown Table Generator
Build a Markdown table interactively. Add rows and columns, set per-column alignment and copy the GitHub-flavoured output.
Open tool