🎮 How to Use
- Drag with mouse (or finger) to draw.
- Pick a color, set brush size, or use Eraser.
- ↓ Save PNG downloads your drawing.
About this tool
Browser-based sketchpad. Pen, color, size. Touch and mouse supported. Save your drawing as PNG. Useful for quick wireframes, doodles, signatures, or annotations.
About the drawing canvas
This drawing canvas is a single-layer raster sketchpad rendered into an HTML5 <canvas> element, 800 by 500 pixels at its internal raster resolution. You draw with a mouse, touchpad, finger, Apple Pencil, or any input device the browser exposes as a pointer or touch event. The tool gives you a color picker (full 24-bit hex range), a brush size slider from 1 to 40 pixels, an eraser toggle that switches the stroke style to white, a clear-all button, and a Save PNG button that exports the canvas to a downloadable image file.
Use cases land in three buckets. First, throwaway sketches: a quick wireframe over coffee, a doodle to amuse a kid, a back-of-envelope diagram in a video call. Second, annotation: open a screenshot in a new tab, screenshot it into here, mark it up, save the marked-up PNG. Third, signature capture: a single-stroke signature is the most common professional use. For anything that needs layers, undo history, vector export, brushes that respond to pen pressure, or collaboration, jump to Excalidraw, tldraw, Figma, or Procreate.
How the canvas renders strokes
Every pointer move event captures the cursor position in canvas-space coordinates (rescaled from CSS pixels to the 800 x 500 raster) and draws a line segment from the previous point to the current point. The lineCap and lineJoin are both set to round, so strokes look smooth at any width. The PNG export uses canvas.toDataURL("image/png") to encode the raster into a base64-data URL, then triggers a download via a synthesised anchor click.
canvas raster 800 x 500 pixels stroke color hex from color input stroke width 1 to 40 px (slider value) lineCap, lineJoin round (smooth ends and corners) eraser mode stroke style switched to #fff save format PNG via canvas.toDataURL
- 800 x 500 = the internal pixel grid; CSS resizes it but the underlying raster is fixed.
- Pointer event = mousedown, mousemove, touchstart, touchmove, pen down/move.
- PNG output = lossless, transparent-background-capable; here the background is white because Clear paints the canvas white.
Worked example: marking up a screenshot
You want to highlight a bug in a UI screenshot before emailing it to a colleague.
- Open the canvas and click Clear to ensure a clean white background.
- Paste the screenshot using your screenshot tool's preview window first; the canvas does not currently support paste-image, so you screenshot directly and use the canvas to add markup only.
- Pick a high-contrast colour (red #ef4444 or bright orange) so annotations stand out on the underlying screenshot when merged in a presentation tool.
- Set brush size to 6 for circles around problem regions and 3 for arrows.
- Save the PNG via the download button. The export is named
drawing.pngat 800 x 500 raster.
Pen, eraser, and export behaviour
| Action | Trigger | Effect on canvas | Effect on file |
|---|---|---|---|
| Pick color | Color input change | Next stroke uses new hex | None until next save |
| Adjust brush size | Range slider 1 to 40 | Next stroke uses new width | None until next save |
| Eraser toggle | Eraser button click | Strokes paint white over previous content | None until next save |
| Clear | Clear button | Wipes entire 800 x 500 raster to white | None until next save |
| Save PNG | Save button | No change | Downloads drawing.png |
| Touch drag | Finger on canvas | Draws stroke; preventDefault stops page scroll | None until save |
Pitfalls to avoid
- Expecting pressure sensitivity. The canvas reads x and y from pointer events only. Apple Pencil pressure and Wacom tilt data are not used; brush width comes from the slider, not the pen.
- Losing work to a refresh. There is no autosave. Close or refresh the tab and the raster is gone. Save PNG before doing anything else.
- Erasing past the original stroke. The eraser paints white, not transparency. If your background were not white, eraser strokes would visibly leave white blocks.
- Trying to undo. No stroke history is recorded. The simplest workaround is to save PNG checkpoints between sections, then re-open from the file if needed.
- Tiny brush at large canvas zoom. The canvas is rescaled to fit the screen, but the brush width is in raster pixels, not CSS pixels. A 1 px brush on a half-size canvas looks like a half-pixel line on screen.
- Mobile tap-to-zoom triggering on the canvas. Double-tap zooms the page on some mobile browsers. Single-finger drag is the safe interaction.
Related tools on 3Tej
Frequently asked questions
What resolution is the saved PNG?
The canvas is 800 by 500 pixels (internal raster), regardless of how it is sized on the page. The Save PNG button exports that exact 800 x 500 raster. For larger prints, redraw with the browser zoomed in or use a vector tool like Figma or Inkscape.
Does the canvas work with a stylus or Apple Pencil?
Yes, any input device the browser reports as a touch or pointer event works: Apple Pencil on iPad Safari, Wacom on desktop Chrome, Samsung S Pen on Android. Pressure sensitivity is not currently exposed: brush width is fixed by the size slider, not pen pressure.
Can I undo or redo strokes?
This sketchpad has Clear and Eraser but not stepwise undo. For multi-step editing with layers and undo history, use a dedicated tool like Excalidraw, tldraw, or Krita. The canvas here is intentionally simple: single-layer, no history, instant PNG export for a quick sketch or annotation.
Is my drawing saved anywhere after I close the tab?
No. The pixel data lives only in the browser canvas buffer. Close the tab and it is gone forever. Click Save PNG before leaving to keep a copy. Nothing is uploaded to a server, and there is no autosave to localStorage.
Why is my touch drawing also scrolling the page?
The canvas calls preventDefault on touch events to stop the page from scrolling while drawing. If your finger started outside the canvas border, the browser already committed to scrolling. Land inside the canvas first, then drag. On iOS, holding two fingers will pan the page even over the canvas.