JSFiddle - React, Tailwind, and code Playground

HTML

<canvas onmousemove="moveMouse(event);"></canvas>

CSS

body { background:#eee }
canvas{ display:block; margin:1em auto; background:#fff }

JavaScript

var c = document.querySelector('canvas'),
    ctx = c.getContext('2d');

c.width = c.height = 400;
ctx.lineWidth   = 12;
ctx.lineCap     = 'round'

ctx.strokeStyle = 'rgba(255,0,0,0.2)';

var coordList = new Array();
function moveMouse(e)
{
    var x = e.x-$("canvas").offset().left;
    var y = e.y-$("canvas").offset().top;
    coordList.push([x,y]);
    if (coordList.length >= 2) {
        ctx.beginPath();
        ctx.moveTo(coordList[0][0], coordList[0][1]);
        for (var i = 1 ; i <  coordList.length ; ++i) ctx.lineTo(coordList[i][0], coordList[i][1]);
        ctx.stroke();
    }
}