JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<canvas id="canvas"></canvas>

CSS

*{
  margin: 0;
}

JavaScript

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let ctx = canvas.getContext("2d"),
  xt, yt, xtt, ytt, cy, cx, vdy1, vdx1, vdy2, vdx2

ctx.lineCap = 'round'

ctx.lineWidth = 10

window.addEventListener("touchstart", (e) => {
  
  xt = e.clientX
  yt = e.clientY
  vdx1 = e.clientX
  vdy1 = e.clientY
  xtt = 0
  ytt = 0
  window.addEventListener("touchmove", cursor)
  //requestAnimationFrame(cursorEx(e))
})
window.addEventListener("touchend", () => {
  window.removeEventListener("touchmove", cursor)

})

window.addEventListener("mousedown", (e) => {
  
  xt = e.clientX
  yt = e.clientY
  vdx1 = e.clientX
  vdy1 = e.clientY
  xtt = 0
  ytt = 0
  window.addEventListener("mousemove", cursor)
  //requestAnimationFrame(cursorEx(e))
})
window.addEventListener("mouseup", () => {
  window.removeEventListener("mousemove", cursor)

})

function cursorEx(e) {
  let x = e.clientX,
    y = e.clientY,
    c = 20
    console.log(x, y)
  if (Math.abs(xt - x) > c || Math.abs(yt - y) > c) {
    if (xtt != 0 || ytt != 0) {
      vdy2 = vdy1
      vdx2 = vdx1
      vdy1 = (ytt + yt)/2
      vdx1 = (xtt + xt)/2
      ctx.beginPath()
      ctx.moveTo(vdx2, vdy2)
      ctx.bezierCurveTo((xtt+vdx2)/2, (ytt+vdy2)/2,
      (xtt+vdx1)/2, (ytt+vdy1)/2,
      vdx1, vdy1)
      ctx.stroke()
      xtt = xt
      ytt = yt
      
    } else {
      xtt = xt
    	ytt = yt
    }
    xt = (x + xt)/2
    yt = (y + yt)/2
  }
  //requestAnimationFrame(cursorEx(e))
}

function cursor(e) {
  let x = e.clientX,
    y = e.clientY,
    c = 2
  if (Math.abs(xt - x) > c || Math.abs(yt - y) > c) {
    /*ctx.beginPath()
    ctx.moveTo(x, y)
    ctx.rect(x - 4, y - 4, 9, 9);
    ctx.stroke()*/
    if (xtt != 0 || ytt != 0) {

      //cy = yt//(((ytt + (y + yt) / 2) / 2) + yt) / 2
      //cx = xt//(((xtt + (x + xt) / 2) / 2) + xt) / 2
      /*
      cy = (4*yt - ytt - y)/2
      cx = (4*xt - xtt - x)/2*/
      
      vdy2 = vdy1
      vdx2 = vdx1
      
      vdy1 = (ytt + yt)/2
      vdx1 =...