<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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.