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: rgba(255,255,255,0.0);

}
body{
    margin:0;
    background-image: url(http://img1.cliparto.com/pic/s/183541/3563378-white-paper-texture.jpg);
}

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;

        ctx.fillRect(100,100,100,100);

        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 = "rgba(255,255,255,0.0)";
                    ctx.lineWidth=1;
                    stroke();
                 }
                 this.X = e.pageX ;
                 this.Y = e.pageY ;
            }
        }, 0);