A simple API access to the incredible handwriting recognition of Google IME

See here

    <script type="text/javascript" src="handwriting.js"></script>

The captured trace looks like:

var trace = 
    [   //the trace is an array of strokes
        [   //a stroke is an array of pairs of captured (x, y) coordinates
            [300, 310, 320, 330, 340], //x coordinate
            [320, 320, 320, 320, 320]  //y coordinate
            //each pair of (x, y) coordinates represents one sampling point 
        ],
        [
             [320, 320, 320, 320, 320],
             [300, 310, 320, 330, 340]
        ]
    ];

For example, the trace above is composed of two strokes,

(300, 320), (310, 320), (320, 320), (330, 320), (340, 320)

and

(320, 300), (320, 310), (320, 320), (320, 330), (320, 340),

which is produced by writing "十".

options argument is an optional object of following fields:

var options = {
    width : 800,         //int, width of the writing area, default: undefined
    height : 800,        //int, height of the writing area, default: undefined
    language : "zh_TW",  //string, language of input trace, default: "zh_TW"
    numOfWords : 1,      //int, number of words of input trace, default: undefined
    numOfReturn : 5,     //int, number of maximum returned results, default: undefined
};

Under most conditions, only language field is required. However, specifying writing area width and height helps in improving precision.

See Language Support

The recognition function will invoke the callback function argument passed in after recognition process. The callback function should accept two arguments as shown below:

var callback = function(result, err){
    if(err) throw err;
    else console.log(result);	
};

The returned result will be an array of string, for example, the trace above (with other options set to default) generates:

[ "十", "+", "一|", "一1", "一个", "-|", "一'", "-1", "一．", "-．" ]

If no error occurred, err will be undefined.

bound on a button as an example:

<button onclick="handwriting.recognize(trace, options, callback);">Recognize</button>

Include handwriting.canvas.js instead of handwriting.js if you want to use the pre-implemented canvas behaviors.

<script type="text/javascript" src="./handwriting.canvas.js"></script>

Declare html canvas as handwriting.Canvas object by passing that canvas element to the constructor:

<canvas id="can" width="400" height="400" style="border: 2px solid; cursor: crosshair;"></canvas>

<script>
    var can1 = new handwriting.Canvas(document.getElementById("can"));
</script>

Now trace is automatically captured, stored in the object, and shown on the given element (either by mouse dragging or touch).

The captured trace and other fields are independent through objects, so call the following functions exactly on which object you wish to take action to:

    //Set callback function
    can1.setCallBack(function(data, err) {
        if(err) throw err;
        else console.log(data);
    });

    //Set line width shown on the canvas element (default: 3)
    can1.setLineWidth(5);

    //Set options
    can1.setOptions(
        {
            language: "ja",
            numOfReturn: 3
        }
    );

    //recognize captured trace
    can1.recognize();
	
    //Clear canvas, captured trace, and stored steps
    can1.erase();

This feature is achieved by saving every stroke in object, however, such attempt consumes relatively higher memory, so undo and redo functionalities are disabled by default, to change the availability, simply call :

    //only turn on undo functionality
    can1.set_Undo_Redo(true, false);

    //turn on both functionalities
    can1.set_Undo_Redo(true, true);

note that redo functionality can be turned on only if undo functionality is also turned on

    //calling any of the two functions below leads to the same consequence: turn off both undo, redo functionality, and clear stored steps (if any) 
    can1.set_Undo_Redo(false, false);
    can1.set_Undo_Redo(false, true);

If the functionalities are turned on, the following functions will work, otherwise, nothing will happen:

    can1.undo();
    //set canvas and stored trace to the last state (stroke)

    can1.redo();
    //if there are undo records, return to the state of the next stored step

Note that, even included handwriting.canvas.js now, the previous way of calling recognition still works :

    handwriting.recognize(trace, options, callback);

so that you can take advantage of the handwriting.canvas object, while not changing previous code.

Reference

Note: Google provides a supported language list, but not the language codes. The following codes are collected from the Internet and only zh_TW, en, ja are tested. If you notice weird recognition results then maybe the language code is wrong.

MIT licensed