AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do I draw or sketch online without any app or upload?

Use a browser-based <canvas> drawing whiteboard. It gives you a blank board, a brush with an adjustable colour and size, and a stroke-preserving eraser; a Freehand mode smooths your pointer or touch strokes into clean curves (with an optional pen-like velocity taper that makes fast strokes thinner), and a Pixel-art mode snaps a brush to a grid so you paint whole cells and export a crisp, blocky PNG. Undo/redo, Clear and a PNG export (freehand can super-sample, pixel-art upscales crisply) round it out. Everything runs in your browser on a <canvas> element — nothing is uploaded, so your drawing never leaves your device.

  • Freehand mode: quadratic-Bézier midpoint smoothing turns a jagged pointer path into a smooth line
  • Optional velocity taper mimics a real pen — fast strokes thin, slow strokes thicken
  • Pixel-art mode snaps to an 8–96px grid and exports a crisp nearest-neighbour PNG
  • Undo/redo (bounded snapshot history), Clear, colour palette, size sliders and grid toggle
  • 100% client-side on a <canvas>; the PNG export is built in-memory and never uploaded

What is

Drawing whiteboard (canvas sketchpad)

A drawing whiteboard is an in-browser sketchpad built on the HTML <canvas> element, where you draw with a pointer, stylus or finger. Strokes are rendered as raster pixels: a freehand stroke is smoothed by drawing each segment as a quadratic Bézier curve through the midpoints of the recorded points, so the sampled pointer path becomes a continuous line, and an optional velocity-based taper varies the width to imitate pen pressure. A pixel-art mode instead stores a small logical grid (one pixel per cell) and scales it up for display with image smoothing turned off, so exported pixels stay crisp. Because a canvas has a fixed pixel resolution, strokes are flattened to pixels immediately — there are no editable vector objects, so individual past strokes cannot be moved or restyled (only undone).

Design

Related terms

HTML canvasraster drawingquadratic Bézier smoothingpixel artnearest-neighbour scalingvelocity taperundo/redo historyPNG exportsketchpaddigital whiteboard

Frequently Asked Questions

No. The whole whiteboard runs on a <canvas> in your browser tab. Your strokes are pixels on that canvas and the PNG export is encoded locally, so nothing is uploaded, logged or stored on a server.

The Drawing Whiteboard is 100% client-side. Every stroke is painted straight onto an HTML <canvas> backing store in your browser, the undo/redo history is kept as in-memory ImageData snapshots, and the PNG you download is encoded with the canvas toBlob API and handed to the browser through an in-memory object URL. There is no upload endpoint, no server-side processing and no CDN in the drawing path; the only optional network use on the page is consent-gated ads. Close the tab and the board and its history are discarded.

Freehand draws smooth, anti-aliased strokes on a large board and can super-sample the PNG export for a sharper line. Pixel-art paints whole cells on a small grid and exports a crisp, blocky nearest-neighbour PNG with no blur.

Freehand mode uses a full-resolution board (960×600 logical pixels) and smooths your pointer path with quadratic-Bézier midpoint interpolation, with an optional velocity taper that thins fast strokes and thickens slow ones like a real pen; its PNG export can be super-sampled up to 4× for a crisper line. Pixel-art mode stores a tiny logical grid of gridSize×gridSize cells at one pixel per cell and displays it scaled up with image smoothing turned OFF; a snap-to-grid brush paints whole cells (using a Bresenham line so fast drags leave no gaps), and the export upscales each logical pixel into a solid block so the art stays crisp. The two modes share one board and the same undo/redo, Clear and export controls.

No. A canvas is raster, so each stroke is flattened to pixels the instant it is drawn. There are no editable vector objects, so you can only undo and redo — not select, move or restyle a single past stroke.

This is a raster whiteboard, not a vector editor. Every stroke is composited directly onto the canvas pixels as you draw, so the board is a flat image with no layers of independent objects. That means you cannot click an old line to move, recolour or resize it — the only way back is Undo (and Redo), which restores an earlier snapshot of the whole board. If you need to reposition or restyle individual shapes after the fact, a vector tool (SVG-based) is the right choice instead.

No. A higher export scale adds more PIXELS, not more dpi. PNGs written by the canvas carry 96dpi metadata regardless of scale, so a 2× or 4× export is a larger, sharper image rather than a higher-resolution print file.

The export scale (1×–4×) multiplies the pixel dimensions of the output: a freehand board is redrawn larger and super-sampled for a sharper line, and a pixel-art grid is nearest-neighbour upscaled so each cell becomes a bigger solid block. What it does NOT change is the dpi metadata — canvas toBlob/toDataURL always tag PNGs at 96dpi. So a bigger scale gives you more pixels (useful for sharper on-screen use or larger prints), but if a printer needs a specific dpi you would set that in the printing software, since the file itself does not encode a higher dpi.

Detailed Explanation

Methodology

How the Drawing Whiteboard Works

The whiteboard is a single HTML <canvas> element with two modes that share one backing store. In FREEHAND mode the board is a 960×600 logical bitmap and each pointer, stylus or touch sample is pushed into a points buffer; a pure engine (whiteboardEngine.ts) draws the newest segment as a quadratic-Bézier curve that runs from the midpoint of the previous two points to the midpoint of the latest two, using the point between them as the control handle, so a jagged sampled path becomes a continuously smoothed line without re-drawing the whole stroke each frame. In PIXEL-ART mode the board is instead a tiny gridSize×gridSize bitmap stored at one pixel per cell and displayed scaled up with image smoothing turned OFF. Everything is composited straight onto the canvas in the browser; nothing is uploaded.

  • One <canvas> element shared by a freehand and a pixel-art mode
  • Freehand board is 960×600 logical pixels; strokes are raster, not vector
  • Each freehand segment is a quadratic Bézier through recorded midpoints
  • Pixel-art board is gridSize×gridSize at 1px per cell, scaled up unsmoothed
  • All drawing happens in the browser — no upload, no server
How It Works

Velocity-Based Pen Taper

To make freehand strokes feel like a real pen, the engine can vary the line width along the stroke. If the input device reports genuine stylus pressure it is used directly; otherwise the engine estimates a 0..1 pressure from pointer VELOCITY — a large jump between two samples (a fast flick) yields low pressure and a thin line, while a small, deliberate move yields high pressure and a thicker line. The estimate uses a smooth r/(r+distance) falloff, where r scales with the brush size, and is biased toward the middle of the range and floored at 25% of the nominal width so a fast stroke never fully vanishes. Turning tapering off simply renders every segment at the base brush size.

  • Real stylus pressure is used when the device reports it
  • Otherwise pressure is estimated from pointer speed between samples
  • Fast strokes → thin line; slow, deliberate strokes → thicker line
  • Smooth 1/(1+x) falloff scaled by brush size, floored at 25% width
  • Taper off = a constant-width line at the base brush size
Technical Details

Crisp Pixel-Art Rendering and Export

Pixel-art mode treats the board as a small logical grid, one canvas pixel per cell, and maps each display coordinate back to a cell with a simple floor(coord / zoom). Dragging fast is handled by walking a Bresenham line between the previous and current cell so every cell on the path is filled with no gaps between sampled pointer events. Because the logical bitmap is displayed and exported with imageSmoothingEnabled set to false, each cell scales up into a solid, sharp block rather than a blurry patch. Export composites the source onto a fresh opaque canvas filled with the board background (so transparent areas become white, not a checkerboard), redraws it at an integer 1×–4× scale, and encodes a PNG with the canvas toBlob API.

  • Display coordinate → cell via floor(coord / zoom)
  • Bresenham line fills every cell on a fast drag — no gaps
  • imageSmoothingEnabled = false keeps upscaled pixels crisp
  • Export flattens onto an opaque background before encoding
  • PNG encoded locally with canvas toBlob at an integer 1×–4× scale
Use Cases

Undo, Redo and Clear via Snapshot History

The board keeps history as a bounded stack of ImageData snapshots of the canvas backing store. When a stroke finishes, the pre-stroke snapshot is pushed onto the undo stack and the redo stack is cleared; Undo restores the previous snapshot and moves the current state onto the redo stack, and Redo does the reverse. The stack is capped (40 entries) so memory stays bounded — the oldest snapshot is dropped when the cap is reached. Clear fills the whole board with the background and records a snapshot so it too can be undone. Because history is whole-board snapshots rather than a list of vector objects, undo/redo operates on the entire image, not on individual strokes.

  • History = a bounded stack of full-board ImageData snapshots
  • Undo/redo swap snapshots between two stacks
  • History is capped at 40 entries so memory stays bounded
  • Clear fills the background and is itself undoable
  • Undo works on the whole board, not on single strokes
Limitations

Honest Limitations of a Raster Whiteboard

A <canvas> has a FIXED pixel resolution and strokes are flattened to pixels the instant they are drawn, so this is a raster editor with no editable vector objects: you cannot select, move, recolour or resize a single past stroke — only undo and redo. Freehand smoothing is midpoint quadratic-Bézier interpolation, which is fast and stable but not the pressure-and-tilt fidelity of a native drawing app. Exported PNGs always carry 96dpi metadata regardless of the export scale, so a higher scale adds PIXELS, not dpi; a printer that needs a specific dpi is set in the print software. Undo/redo history is bounded, so very long sessions eventually forget their oldest steps, and there is deliberately no cloud sync — the board lives only in the current tab.

  • Raster canvas: no editable vector objects, only undo/redo
  • Cannot select, move or restyle an individual past stroke
  • Smoothing is midpoint Bézier, not full pressure-and-tilt fidelity
  • PNGs are always 96dpi metadata — higher scale = more pixels, not dpi
  • Bounded history and no cloud sync; the board lives in the tab only
Privacy & Security

Private by Design

Everything happens on the user’s device. Strokes are painted directly onto the canvas backing store, the undo/redo history is in-memory ImageData, and the PNG you download is encoded with the canvas toBlob API and handed to the browser through an in-memory object URL that is revoked shortly after the click. There is no upload endpoint, no server-side processing and no CDN in the drawing or export path; the only optional network use on the page is consent-gated ads. The tool works offline once cached, keeps no accounts, sets no tracking, and the board and its history are discarded the moment the tab is closed.

  • Strokes drawn straight onto a canvas in the browser — never uploaded
  • Undo/redo history is in-memory ImageData, not stored on a server
  • PNG encoded locally and downloaded via an in-memory blob URL
  • Works offline once cached; no accounts, no tracking
  • Board and history are discarded when the tab closes
Raster canvas whiteboard vs. vector editor vs. native drawing app
ApproachWhat it is good forEditable objects after drawing?
Raster canvas (this tool)Quick sketches and pixel art with instant, smooth strokesNo — pixels are flattened; only whole-board undo/redo
Vector (SVG) editorLogos and diagrams you keep reshaping and restylingYes — each path is a movable, restyleable object
Native drawing appHigh-fidelity art with full pressure, tilt and layersYes — layers and often per-stroke editing
This tool, pixel-art modeCrisp pixel/sprite art exported without blurNo — cells are pixels; edit by repainting or undo

A raster canvas trades per-object editability for speed and pixel-perfect control; for reshaping individual shapes use a vector editor. As of July 2026.