JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="worksheet-canvas" width="960" height="500">
                        
</canvas>

CSS

canvas{
    background: black;
}

JavaScript

$(function() {

    var worksheetCanvas = $('#worksheet-canvas');

    var context = worksheetCanvas.get(0).getContext("2d");


    context.strokeStyle = "rgb(251, 243, 243)";


    worksheetCanvas.click(function(e) {

        context.beginPath();


        var xCoordFirst = e.pageX;
        var yCoordFirst = e.pageY;

        context.moveTo(xCoordFirst, yCoordFirst);


        worksheetCanvas.click(function(f) {

            var xCoordSecond = f.pageX;
            var yCoordSecond = f.pageY;

            context.lineTo(xCoordSecond , yCoordSecond );
            context.closePath();
            context.stroke();

        })

    })


})