JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500"></canvas>

CSS

canvas {
    border: 1px solid #eee;
}

JavaScript

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    pos = {x: 0, y: 0},
    drawing = false;

context.strokeStyle = "blue";

canvas.addEventListener("mousedown", function(e) {
    drawing = true;
    pos.x = e.offsetX;
    pos.y = e.offsetY;
});

canvas.addEventListener("mousemove", function(e) {
    if (!drawing) return;
    context.beginPath();
    context.moveTo(pos.x, pos.y);
    pos.x = e.offsetX;
    pos.y = e.offsetY;
    context.lineTo(pos.x, pos.y);
    context.stroke();
    context.endPath();
});

document.addEventListener("mouseup", function(e) {
    drawing = false;
});

canvas.addEventListener("dblclick", function(e) {
    context.clearRect(0, 0, canvas.width, canvas.height);
});

setInterval(function() {
    context.save();
    context.strokeStyle="none";
    context.fillStyle = "rgba(255,255,255,0.2)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.restore();
}, 20);