JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas">Your browser is unsupported!</canvas>

JavaScript

var canvas  = document.getElementById("canvas");
var context = canvas.getContext("2d");

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

var radius  = 10;
var m_down  = false;

var pt = function(e){
    if(m_down){
        context.lineWidth=20;
        context.lineTo(e.offsetX, e.offsetY);
        context.stroke();
        context.beginPath();
        context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
        context.fill();
        context.beginPath();
        context.moveTo(e.offsetX, e.offsetY);       
    }
}


document.body.style.margin = 0;

var down = function(e){
    m_down = true;
    pt(e);
}

var up = function(e){
    m_down = false;
    context.beginPath();
}
canvas.mousedown(function() {
  alert( "Handler for .mousedown() called." );
});