Drawing Pad
Free browser drawing canvas with color, brush, and eraser
Drawing Pad tool
Drawing Pad: key facts
- What it does
- Free browser drawing canvas with color, brush, and eraser
- Category
- Creative Tools
- Cost
- Free, with no account, sign-up, or install.
- Your data
- Runs entirely in your browser — the files and text you enter are never uploaded to a server.
- Last reviewed
- . Report an incorrect result.
What the Drawing Pad does
Sometimes you need to sketch a concept faster than any diagramming tool allows — a quick wireframe, a rough data-flow arrow, a hand-drawn annotation on a shared idea. This drawing pad gives you a freehand canvas that opens instantly in any browser, works equally well with a mouse, touch screen, or stylus, and exports to PNG with a single click. No account, no install, no whiteboard software subscription required.
UX designers use it to sketch screen flows before opening a dedicated tool. Teachers use it to annotate diagrams during screen-shared lessons. Developers use it to diagram architecture concepts in meetings. The canvas uses the Pointer Events API for cross-device compatibility and applies quadratic Bézier smoothing between pointer positions to produce clean curves from even fast gestures. Erased strokes use canvas compositing rather than painting white, so erasing on a transparent background removes pixels cleanly rather than covering them.
Using the Drawing Pad, step by step
- Click or tap the color swatch to pick your brush colour.
- Drag the size slider to set the brush width from 1px (fine pen) to 40px (broad marker).
- Draw on the canvas — the tool works with mouse, finger touch, and stylus. Use the Draw / Erase toggle to switch between adding and removing strokes.
- Click "Download PNG" to save the drawing. Click "Clear" to blank the canvas and start over.
Freehand drawing, exported as PNG
The pad is a canvas that captures pointer input — mouse, trackpad, stylus, or touch — and draws strokes with your chosen colour and brush size. The finished drawing exports as a PNG, and everything stays on your machine.
PNG is the right format here: it is lossless, so strokes and edges stay crisp rather than acquiring compression artefacts, and it supports transparency where the canvas is left unpainted.
Because the output is a raster image rather than a vector one, the drawing is fixed at the resolution it was made. Enlarging the exported file will soften it.
- A stylus gives far better control than a mouse for anything freehand.
- PNG export keeps stroke edges sharp.
- The drawing is pixels, not paths, so individual strokes cannot be moved afterwards.
What makes this one worth using
- Pointer Events API gives reliable cross-device drawing: the same event handlers work for mouse, touch, and stylus inputs without separate code paths or polyfills, ensuring consistent behaviour on iOS Safari, Android Chrome, and desktop browsers alike.
- Smooth curves: the tool uses the midpoint between consecutive pointer positions as a Bézier control point, which eliminates the jagged corners produced by straight line segments between raw pointer samples.
- Destination-out compositing for the eraser removes pixels from the canvas buffer rather than painting over them. This correctly erases strokes on a white background and leaves transparent regions where the eraser passes.
- Instant PNG export: the HTML5 Canvas `toDataURL('image/png')` API encodes the canvas directly to a downloadable PNG without any server-side processing.
Raster and vector, and what this is for
The raster nature is the defining constraint. A vector drawing stores strokes as mathematical paths, which can be moved, recoloured, and scaled to any size without loss; a raster drawing stores the resulting pixels. That makes vector the right choice for logos, diagrams, and anything that needs to scale, and raster fine for a sketch, an annotation, or a signature.
Pressure sensitivity is worth mentioning because its absence is noticeable. Graphics tablets and modern styluses report pressure through the pointer events API, allowing stroke weight to vary with how hard you press — the thing that makes digital drawing feel like drawing. Where that is not available, every stroke is uniform.
For its intended uses this is entirely adequate: a quick diagram to paste into a message, annotating a screenshot, a signature for a document, or sketching an idea. For sustained illustration work, a dedicated application gives you layers, undo history, brush engines, and the ability to revise — none of which a single-canvas pad can offer, and layers in particular are what make real editing possible.
Frequently Asked Questions
Can I use this on a tablet or iPad?
Yes. The canvas uses `touch-action: none` to prevent the browser from scrolling the page while you draw, and the Pointer Events API handles touch input the same way as mouse input. Pressure sensitivity from a stylus is not currently mapped to brush size, but the brush size slider provides manual control.
Is my drawing saved if I close the page?
No. The canvas state is held in browser memory and is not persisted to local storage or any server. Download your PNG before closing the tab if you want to keep the drawing.
What resolution is the exported PNG?
The canvas is initialised at its CSS display width (the full width of the content area) by 500px tall. On a high-DPI display the CSS pixels map to physical pixels at a 1:1 ratio — if you need a higher-resolution export, try downloading and then upscaling with the Image Resizer tool.
Can I undo a stroke?
Undo is not currently available — use the Eraser tool to remove unwanted strokes, or click "Clear" to reset the entire canvas. Future updates may add multi-step undo via canvas snapshot history.
