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

See [here] 1

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

The trace structure is like below:

(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
	};

For 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>

###Usage 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

MIT licensed