Lets users draw on the browser using their pointer device

tfjs-blog-user-input-canvas.js

const c = document.getElementById("myCanvas");
c.addEventListener("mousedown", setLastCoords); // fires before mouse left btn is released
c.addEventListener("mousemove", freeForm);

const ctx = c.getContext("2d");

function setLastCoords(e) {
  const {x, y} = c.getBoundingClientRect();
    lastX = e.clientX - x;
    lastY = e.clientY - y;
}

function freeForm(e) {
  if (e.buttons !== 1) return; // left button is not pushed yet
    penTool(e);
}

function penTool(e) {
  const {x, y} = c.getBoundingClientRect();
    const newX = e.clientX - x;
    const newY = e.clientY - y;

    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(newX, newY);
    ctx.strokeStyle = 'white';
    ctx.stroke();
    ctx.closePath();

    lastX = newX;
    lastY = newY;
}

let lastX = 0;
let lastY = 0;