HTML5 Canvas Paint Application with JavaScript
By Prabeesh Keezhathra
- 1 minutes read - 165 wordsA small browser-based drawing tool built on the HTML5 <canvas> element and plain JavaScript.
How it works
The page contains a <canvas> element that listens for three mouse events: mousedown, mousemove, and mouseup. When you press and drag, the handler draws the currently selected shape (line, rectangle, or circle) in the chosen colour. A toolbar above the canvas lets you pick the tool and colour.
All drawing state lives in the browser; nothing hits the server until you explicitly save.
Saving and loading drawings
Each drawing is serialized as a JSON array of shape objects (type, start coordinates, end coordinates, colour). When you click Save, that JSON is sent to the server with a user-provided name. Loading a drawing fetches the JSON back and replays each shape onto a fresh canvas.
Two back-end implementations exist:
| Back-end | Storage | Notes |
|---|---|---|
| Google App Engine | Google Datastore | Originally deployed on appspot.com (no longer running) |
| Flask | SQLite | Local or any WSGI host |