Drawing Pad
Free browser drawing canvas with color, brush, and eraser
About the Drawing Pad
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.
How to Use the Drawing Pad
- 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.
Why Use ToolForge’s Drawing Pad
- 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.
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.
