<html lang="en">
<head>
<script type="text/javascript" src="https://www.chenyuho.com/project/handwritingjs/handwriting.canvas.js"></script>
</head>
<body>
<h4>Hold P for paint mode. In paint mode, any mouse movement will paint over canvas, as if you clicked and dragged</h4>
<h4>Paint mode: <span id='paintMode'>OFF</span></h4>
<canvas id="canvas" width="800" height="400" style="border: 2px solid; cursor: crosshair;"></canvas>
<div class='buttons'>
<button onclick="canvas.recognize()">Recognize</button>
<button onclick="canvas.erase()">Erase</button>
</div>
<div>Result: <span id='result' /></div>
</body>
</html>
body {
width: 100vw;
heigt: 100vh;
}
.buttons {
padding-top: 10px;
padding-bottom: 10px;
}
var canvas = new handwriting.Canvas(document.getElementById("canvas"), 3);
canvas.setCallBack(function (data, err) {
console.log(data);
if (err) throw err;
else document.getElementById("result").innerHTML = data;
});
canvas.setLineWidth(5);
//Set options
canvas.setOptions({
language: "en",
numOfReturn: 1
});
var paintMode = false;
var x = 918,
y = 549;
document.onmousemove = function (e) {
x = e.clientX;
y = e.clientY;
};
document.addEventListener("keydown", (event) => {
if (event.code === "KeyP") {
if (!paintMode) {
paintMode = true;
document.getElementById("paintMode").innerHTML = "ON";
sendMouseEvent();
}
}
});
document.addEventListener("keyup", (event) => {
if (event.code === "KeyP") {
if (paintMode) {
paintMode = false;
document.getElementById("paintMode").innerHTML = "OFF";
sendMouseEvent();
}
}
});
function sendMouseEvent() {
var eventName = paintMode ? "mousedown" : "mouseup";
var element = document.getElementById("canvas");
var clickEvent = document.createEvent("MouseEvents");
clickEvent.initMouseEvent(
eventName,
true,
true,
window,
0,
0,
0,
x,
y,
false,
false,
false,
false,
0,
null
);
element.dispatchEvent(clickEvent);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.