JS Canvas Zoom

by Noreh AD

HTML

<canvas id="canvas"></canvas>

CSS

body {
  background: gainsboro;
  margin: 0;
}

canvas {
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

JavaScript

var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	canvas.width = 600;
	canvas.height = 400;

	var global = {
	  zoom: {
	    origin: {
	      x: null,
	      y: null,
	    },
	    scale: 1,
	  },
	};

	function zoomed(number) {
	  return Math.floor(number * global.zoom.scale);
	}

	function draw() {
	  context.beginPath();
	  /* context.rect(zoomed(50), zoomed(50), zoomed(100), zoomed(100)); */
	  context.rect(50, 50, 100, 100);
	  context.fillStyle = 'skyblue';
	  context.fill();

	  context.beginPath();
	  /* context.arc(zoomed(350), zoomed(250), zoomed(50), 0, 2 * Math.PI, false); */
	  context.arc(350, 250, 50, 0, 2 * Math.PI, false);
	  context.fillStyle = 'green';
	  context.fill();
	}

	draw();

	canvas.addEventListener("wheel", trackWheel);
	canvas.addEventListener("wheel", trackMouse);
	canvas.addEventListener("wheel", zoom);

	function zoom() {
	  context.setTransform(1, 0, 0, 1, 0, 0);
	  context.clearRect(0, 0, canvas.width, canvas.height);

	  context.translate(global.zoom.origin.x, global.zoom.origin.y);
	  context.scale(global.zoom.scale, global.zoom.scale);
	  context.translate(-global.zoom.origin.x, -global.zoom.origin.y);

	  draw();
	}

	function trackWheel(e) {
	  if (e.deltaY > 0) {
	    if (global.zoom.scale > 0.1) {
	      global.zoom.scale *= 0.9;
	    }
	  } else {
	    if (global.zoom.scale < 5) {
	      global.zoom.scale *= 1.1;
	    }
	  }
	  global.zoom.scale = parseFloat(global.zoom.scale.toFixed(2));
	}

	function trackMouse(e) {
	  global.zoom.origin.x = e.clientX;
	  global.zoom.origin.y = e.clientY;
	}