JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      canvas {
        display: block;
      }

JavaScript

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

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

canvas.width = width;
canvas.height = height;

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, width, height);

const state = {
  mouse: { x: 0, y: 0, on: false },
  last: { x: null, y: null },
};

const handleMousedown = () => {
  state.mouse = {
    ...state.mouse,
    on: true,
  };
};

const handleMouseup = () => {
  state.mouse = {
    ...state.mouse,
    on: false,
  };

  state.last = {
    x: null,
    y: null,
  };
};

const handleMousemove = (e) => {
  state.mouse = {
    ...state.mouse,
    x: e.clientX,
    y: e.clientY,
  };
};

const loop = () => {
  if (state.mouse.on) {
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.moveTo(
      state.last.x ? state.last.x : state.mouse.x,
      state.last.y ? state.last.y : state.mouse.y
    );
    ctx.lineTo(state.mouse.x, state.mouse.y);
    ctx.stroke();

    state.last = { x: state.mouse.x, y: state.mouse.y };
  }

  window.requestAnimationFrame(loop);
};

loop();

window.addEventListener('mousedown', handleMousedown);
window.addEventListener('mousemove', handleMousemove);
window.addEventListener('mouseup', handleMouseup);