JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc" />

JavaScript

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var el = document.getElementById('c');
var ctx = el.getContext('2d');


ctx.lineJoin = ctx.lineCap = 'round';
ctx.shadowBlur = 10;
ctx.shadowColor = 'rgb(255, 0, 0)'

ctx.fillStyle = 'red';

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ 
    x: e.clientX, 
    y: e.clientY,
    radius: 1,
  });
};
el.onmousemove = function(e) {
  if (!isDrawing) return;
  
  points.push({ 
    x: e.clientX, 
    y: e.clientY,
    radius: Math.min(1 + points.length/10.0, 5),
    opacity: Math.min(0.25 + points.length/100, 0.7)
  });
  
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
  //ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    ctx.beginPath()
    ctx.lineWidth = points[i].radius
    ctx.lineColor = 'rgb(255,0,0)'
    //ctx.globalAlpha = points[i].opacity
    ctx.moveTo(points[i-1].x, points[i-1].y);
    ctx.lineTo(points[i].x, points[i].y);
    ctx.stroke()
  }
};
  
el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};