JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
            <canvas id="canvas" width="300" height="150">
                <p>Ha ha! you looser! your poor browser doesn't support HTML5 xD</p>
            </canvas>
        </div>
        <p id="info"></p>

CSS

#canvas { 
    border: 5px solid #D6D6D6; 
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
                var painting = false;
                
                $("#canvas").mousedown(function(){ painting = true; });
                $("#canvas").mouseup(function(){ painting = false; });
                $("#canvas").mousemove(function(evt){ 
                    $("#info").html("painting: " + painting);
                    if(painting){
                        var mouseX = evt.pageX;
                        var mouseY = evt.pageY;
                        
                        paint (mouseX, mouseY);
                    }
                });
                
                function paint(x, y){
                    var canvasX = $("#canvas").offset().left;
                    var canvasY = $("#canvas").offset().top;
                    
                    var ctx = $("#canvas").get(0).getContext("2d");
                    ctx.fillStyle = "rgb(10,10,10)";
                    ctx.fillRect(x-canvasX-5, y-canvasY-5, 5, 5);
                }
            });