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.fillStyle = 'skyblue';
	context.fill();
	
	context.beginPath();
	context.arc(zoomed(350), zoomed(250), zoomed(50), 0, 2 * Math.PI, false);
	context.fillStyle = 'green';
	context.fill();
}

draw();

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

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

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