What does this tool do
The Painter is a simple canvas-based drawing tool. Draw with a freehand brush, add shapes (rectangles, circles, lines), use an eraser, add text, and set a custom background colour. Download the canvas as PNG. Useful for quick sketches, annotations, diagrams, and simple art. All drawing happens in the browser—no server.
How to use it
- Choose tool — Select brush, shapes, eraser, or text.
- Draw — Click and drag for brush or shapes. Click for text placement.
- Configure — Set brush size, colour, and fill. For shapes, choose stroke and fill.
- Background — Change the canvas background colour if desired.
- Download — Save the canvas as a PNG image.
- Clear — Reset the canvas to start over.
How it works
The canvas is an HTML5 Canvas element. Drawing uses the 2D context: paths for brush and eraser, rect/arc/line for shapes, fillText for text. Mouse/touch events capture strokes and shapes. The canvas state is stored in memory; download uses toDataURL('image/png'). No external libraries for core drawing—vanilla canvas API. Blob URLs are used only for download.
All computation runs entirely in your browser. No data is sent to any server.
Use cases & examples
- Sketches — Quick drawings and doodles.
- Annotations — Mark up screenshots or diagrams.
- Diagrams — Simple flowcharts or wireframes.
- Signatures — Capture a quick signature.
- Teaching — Demonstrate shapes and colours.
Example
- Brush, red, size 5 → Draw a red freehand line.
- Rectangle tool → Click and drag to draw a rectangle.
- Text tool → Click to place text; type in the dialog.
Limitations & known constraints
- No layers — Single layer; no undo/redo beyond clearing.
- No persistence — Canvas state is lost on reload.
- Basic tools — No gradients, patterns, or advanced filters.
- PNG only — Download format is PNG; no JPEG or SVG export.