JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  

      <canvas id="canvas"  >
      </canvas>

  
  </body>

CSS

#canvas{
	border: solid 2px green;
	background-color:#fff;

}
body{
    margin:0;
}

JavaScript

var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width  = window.innerWidth;
        var height = window.innerHeight;
        canvas.height = height;
        canvas.width = width;

        canvas.addEventListener('mousedown', function(e) {
            this.down = true;   
            this.X = e.pageX ;
            this.Y = e.pageY ;
        }, 0);

        canvas.addEventListener('mouseup', function() {
            this.down = false;          
        }, 0);

        canvas.addEventListener('mousemove', function(e) {
          
            if(this.down) {
                 with(ctx) {
                    beginPath();
                    moveTo(this.X, this.Y);
                    lineTo(e.pageX , e.pageY );
                    ctx.lineWidth=1;
                    stroke();
                 }
                 this.X = e.pageX ;
                 this.Y = e.pageY ;
            }
        }, 0);