JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<canvas	></canvas>

JavaScript

var canvas = $('canvas');
			var context = canvas[0].getContext('2d');
			var mousedown = false;
			var imageObj = new Image(); 
			  
			imageObj.onload = function() {
				var cw = $(window).width();
        var ch = (cw * this.height) / this.width;
        
				alert(cw);
        alert(ch);
        
			  $(canvas).attr({
			    width : cw,
			    height: ch
			  });
			  context.drawImage(imageObj,0,0); 
			}; 
			imageObj.src = 'https://www.livecareer.com/images/uploaded/resume-example-home/web-developer-resume-example-emphasis-2-expanded-2.png'; 

			var clicks = [];

			function drawRectangle(){
			  context.beginPath();
			  context.rect(clicks[0].x, clicks[0].y, clicks[1].x-clicks[0].x, clicks[1].y-clicks[0].y);
			  context.fillStyle = 'rgba(255,235,59,0.5)';
			  context.fill();
			  context.strokeStyle = "#df4b26";
			  context.lineWidth = 1;
			  context.stroke();
			};

			function drawPoints(){
			  context.strokeStyle = "#df4b26"; 
			  //context.lineJoin = "round"; 
			  context.lineWidth = 5; 
			              
			  for(var i=0; i < clicks.length; i++){ 
			    context.beginPath(); 
			    context.arc(clicks[i].x, clicks[i].y, 3, 0, 2 * Math.PI, false); 
			    context.fillStyle = '#ffffff'; 
			    context.fill(); 
			    context.lineWidth = 5; 
			    context.stroke(); 
			  }
			};
			  
			function redraw(){ 
			  canvas.width = canvas.width; // Clears the canvas 
			  context.drawImage(imageObj,0,0); 
			    
			  drawRectangle();
			  drawPoints();
			};

			canvas
			  .mousedown(function (e) {
			    clicks[0] = {
			      x: e.offsetX,
			      y: e.offsetY
			    };
			    mousedown = true;
			  })
			  .mousemove(function (e) {
			    if (mousedown) {
			      clicks[1] = {
			        x: e.offsetX,
			        y: e.offsetY
			      };
			      redraw();
			    }
			  })
			  .mouseup(function (e) {
			    mousedown = false;
			    clicks[1] = {
			      x: e.offsetX,
			      y: e.offsetY
			    };
			  })
			  .mouseleave(function...