JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  
    <div id="container">
      <canvas id="canvas"  >
      </canvas>
    </div>
  
  </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 ;
            this.color = rgb();
        }, 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 );
                    strokeStyle = "rgb(0,0,0)";
                    ctx.lineWidth=3;
                    stroke();
                 }
                 this.X = e.pageX ;
                 this.Y = e.pageY ;
            }
        }, 0);