JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<canvas width="800"></canvas>
<div class="zoom-wrap">
<button id="zmin" > zoomIn </button>
<button id="zmOut"> zoomOut </button>
</div>

CSS

canvas {
  //width: 100%;
} 

.zoom-wrap
{
    position: fixed;
    top: 10px;
    left: 10px;
}

JavaScript

var canvas = $('canvas');
			var context = canvas[0].getContext('2d');
			var mousedown = false;
			var imageObj = new Image(); 
			  
			imageObj.onload = function() {
				var ratio = this.height / this.width;
        var newW = $(canvas).width()
        var newH = newW * ratio
        
			  $(canvas).attr({
			    width : newW,
			    height: newH
			  });
			  context.drawImage(imageObj,0,0, newW, newH); 
			}; 
			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(){ 
       //context.clearRect(0, 0, $(canvas).width(), $(canvas).height()); // Clears the canvas 
       
       var ratio = imageObj.height / imageObj.width;
        var newW = $(canvas).width()
        var newH = newW * ratio
        
			 context.drawImage(imageObj,0,0, newW, newH); 
			    
			  drawRectangle();
			  drawPoints();
			};

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