JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

<style>

.drawingpix    { 

    background-color:#FF00FF;

    width:5px;

    height:5px; 

    position:absolute; 

    top:-50px; 

    left:-50px;

}

</style>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" ></script>

<script type="text/javascript" >

//set drawmode false

var draw= false;



$(document).ready(function() {

//set it true on mousedown

$(document).mousedown(function(){draw=true;});

//reset it on mouseup

$(document).mouseup(function(){draw=false;});





var drawingpix;

$(document).mousemove(function(e) {

    if(draw==true){

        drawingpix = $('<span>').attr({class: 'drawingpix'}).hide();

        $(document.body).append(drawingpix);



        drawingpix.css({

            top: e.pageY,    //offsets

            left: e.pageX //offsets

        }).show();

    }    



});

});

</script>

</head>

<body>

</body>

</html>