Calligraphy Practice Overlay Tool

Upload a reference exemplar and your own writing. Compare side by side with synchronized zoom and pan, overlay at adjustable opacity to trace stroke by stroke, and annotate with arrows and circles. Export a flattened PNG — everything runs in your browser, nothing is uploaded.

🖋️
Reference writing
Click or drag an image here
✏️
Your writing
Click or drag an image here
Zoom:
Annotate:
Upload both images above to begin.

How it works

The tool uses an HTML5 Canvas to render both images entirely in your browser — no data leaves your device. Zoom and pan are driven by a transform matrix applied uniformly to both panels so they stay in sync. The annotation layer is a separate in-memory list of shapes drawn on top each render frame.

1Upload images Choose your reference exemplar (a photo of a master's script or a printed copy) and a photo or scan of your own practice sheet.
2Compare side by side Both images appear in a split view. Scroll or pinch to zoom — both panels move together so you can line up matching characters.
3Overlay & trace Switch to Overlay mode. Drag the Opacity slider to ghost one image over the other. Choose which layer sits on top. Align, then study where your strokes diverge.
4Annotate Draw arrows to mark problem strokes or circles to highlight specific letterforms. Pick a colour, click to place.
5Export Hit Export PNG to flatten the current view — both images, overlay, and all annotations — into a single downloadable PNG.

Frequently asked questions

Does this tool upload my images anywhere?
No. All processing happens inside your browser using the HTML5 Canvas API. Your images are read from disk into memory and never sent to any server. You can use this tool entirely offline once the page has loaded.
What image formats are supported?
Any format your browser can decode works: JPEG, PNG, WebP, HEIC (on Safari), GIF, AVIF, and BMP. For best results use a high-contrast scan or photo taken in good lighting — the cleaner the scan, the easier it is to spot stroke differences in the overlay.
How do I use the Overlay mode to practise tracing?
Upload the reference image as "Reference" and leave "Your writing" blank (or use a blank/light practice sheet photo). In Overlay mode, set the reference on top at around 30-50% opacity. Print the overlay view and practise tracing the ghosted strokes. Alternatively, take a photo of your trace attempt, upload it as "Your writing", and switch back to Side by Side to compare.
The two images are different sizes — will they align correctly?
In Side by Side mode each image fills its own half-panel, so size differences do not matter. In Overlay mode both images are scaled to fill the canvas at the same zoom level. If your practice sheet is photographed at a very different scale from the reference, use the Zoom controls to scale the view until the letterforms look roughly matched in size. For precise work, crop and resize your images to the same pixel dimensions before uploading.
Can I annotate only one panel in Side by Side mode?
Yes. When you draw an arrow or circle, the annotation is pinned to the canvas coordinate where you draw it, which maps to the left panel (reference) or right panel (practice) depending on where you click. As you zoom and pan, all annotations move with the images so they stay attached to the correct region.