JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="background" width="500" height="500"></canvas>

CSS

#background {
      background: #ffbbbb;
      border:1px solid black;
}

JavaScript

var element 		= document.getElementById('background');
var ctx				= element.getContext("2d");
var camera 			= {};
	camera.x 		= 100;
	camera.y 		= 70;
var scale			= 1.0;
var obj				= [];
	obj.push({'x':0,'y':0});
	obj.push({'x':-100,'y':-100});
	obj.push({'x':100,'y':100});

var timer;
element.addEventListener('click', animate, false);
element.addEventListener('wheel', mouseWheel,false);

function animate(evt){
  stop();
  var targetX 		= evt.offsetX + camera.x - element.width/2,
      targetY 		= evt.offsetY + camera.y - element.height/2;

      console.log("cameraX = " + camera.x);
      console.log("cameraY = " + camera.y);    
      console.log("targetX = " + targetX);
      console.log("targetY = " + targetY);
    
  var timeStart 	= Date.now();
  var timeLength	= 10000;
      timer 		= setInterval(update, 10);

  function stop(){
    clearInterval(timer);
  }
  function easing(x) {
      return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI);
  }  
  function fraction(t){
      camera.x += t * (targetX - camera.x);
      camera.y += t * (targetY - camera.y);
  }
  function update(){
    var t = (Date.now() - timeStart) / timeLength;
      if (t > 1) {
          fraction(1);
          stop();
      } else {
          fraction(easing(t));
      }
  }     
}


function mouseWheel(e,el){
	if(e.deltaY<0){
		scale += 0.1;
	}else{
		scale -= 0.1;
	}
    if(scale < 0) scale = 0.1;
    scale = parseFloat(scale);
}


function draw(){
    ctx.clearRect(0,0,element.width,element.height);
    
    ctx.save();
    
    ctx.translate(0-(camera.x - element.width/2),0-(camera.y-element.height/2));  	    
    ctx.scale(scale,scale);
    ctx.fillStyle = 'blue';
    for(var i = 0; i < obj.length; i++){
		ctx.fillRect(obj[i].x-10,obj[i].y-10, 20, 20);   
    }
    ctx.restore();
    ctx.fillStyle = 'red';
    ctx.fillRect(element.width/2-2,element.height/2-2, 4,4);       
}

setInterval(draw, 10);