JSFiddle - React, Tailwind, and code Playground

HTML

<canvas onmousemove="mouseMove(event);" onmousedown="mousePress(event)" onmouseup="mouseRelease(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 multiPath = new Array();
var buttonDown = false;

function redraw()
{
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    for (var i = 0 ; i < multiPath.length ; ++i){
        var path = multiPath[i];
        if (path.length === 0) continue;
        if (path.length === 1){
            // Cheap cheat in case of path with a single point
            ctx.moveTo(path[0][0], path[0][1]);
            ctx.lineTo(path[0][0]+1, path[0][1]+1);
        }else{
            ctx.moveTo(path[0][0], path[0][1]);
            for (var j = 1 ; j < path.length ; ++j) ctx.lineTo(path[j][0], path[j][1]);
        }
    }
    ctx.stroke();
}
function getCoord(e)
{
    var x = e.x-$("canvas").offset().left;
    var y = e.y-$("canvas").offset().top;
    return [x,y];
}
function mousePress(e)
{
    buttonDown = true;
    var path = new Array();
    path.push(getCoord(e));
    multiPath.push(path);
    redraw();
}
function mouseRelease(e)
{
    buttonDown = false;
}
function mouseMove(e)
{
    if (!buttonDown) return;
    multiPath[multiPath.length-1].push(getCoord(e));
    redraw();
}