The JavaScript Calligrapher is a tool enabling the design of stylized characters to be saved and drawn out on a canvas in real time. This tool was designed with the main goal of teaching stroke order to learners of a new language/writing system, but of course the utility extends beyond the scope of stroke order to allow a great variety of artistic expression.

The calligrapher tool consists of two canvas elements (one for drawing, the other for editing) that may be interchanged by clicking on one or the other.

Design your masterpiece with Bézier curves on the editing canvas. Each curve object has four control points—learn about the math here—, and an optional yellow point may be added as the offset to baseline (for designing letters that can be saved and later chained into words).

Under Development

This tab will contain characters/alphabets from the website and designed by you, the user.