What Is the Canvas Paint Tool?
The Canvas Paint Tool is a browser-based drawing application for quick sketches, annotations, wireframes, and creative doodling. It provides a blank canvas with a brush, eraser, line, rectangle, ellipse and text tools, a colour picker and PNG export — no software installation required. Everything runs in your browser using the HTML5 Canvas API.
Quick Sketching for Designers and Developers
Sometimes you need to sketch an idea faster than opening Figma. Use the paint tool for quick wireframe sketches during brainstorming, annotating screenshots with arrows and circles, or drawing diagrams to explain concepts in chat or docs. Export as PNG and share instantly.
How to Use This Tool
- Choose a tool — Pick the brush, eraser, line, rectangle, ellipse or text tool, or Fill all, in the toolbar.
- Set your color and size — Pick a color from the palette and adjust the brush/stroke size to match your needs.
- Draw on the canvas — Click and drag to draw; for a straight line use the Line tool. Use the eraser or undo to correct mistakes.
- Export your artwork — Save your drawing as a PNG image, or clear the canvas to start fresh.
What each tool does
| Brush | Freehand stroke with round ends, 1 to 50 px wide. |
| Eraser | Paints the background colour back; on a transparent canvas it cuts back to full transparency. |
| Line, Rectangle, Ellipse | Press, drag and release. The shape follows the pointer with a live preview and is drawn once, at the stroke width, when you let go. |
| Text | Click where the text should start and type it in the box that opens. Text size is four times the Size value (at least 12 px), in your system font. |
| Fill all | Fills the whole canvas with the current colour; it is not a flood fill for one region. |
| Clear + background | Clear starts again on the background chosen next to it: dark, white or transparent. |
Canvas size and export. The canvas is as wide as the drawing area on your screen (up to 868 px on a desktop, 358 px on a 390 px-wide phone) and 500 px tall, and Save PNG exports exactly those pixels. On a high-density screen the PNG therefore has fewer pixels than the screen shows; for a larger image, draw on a wider window. With the transparent background the PNG keeps its alpha channel, so it can sit on top of other artwork.
Undo. The last 30 steps are kept: use the arrow buttons, Ctrl+Z (Cmd+Z on a Mac) to undo and Ctrl+Shift+Z or Ctrl+Y to redo. A shape, a line of text or one continuous brush stroke counts as one step.
Every tool above was checked in Chromium on October 12, 2026 by reading the canvas pixels after each action, including the exported PNG's transparency.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools