JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!-- saved from url=(0048)http://phrogz.net/tmp/canvas_zoom_to_cursor.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>Zooming via HTML5 Canvas Context</title>
	<style type="text/css" media="screen">
		body { background:#eee; margin:1em; text-align:center; }
		canvas { display:block; margin:1em auto; background:#fff; border:1px solid #ccc }
	</style>
</head><body style="-webkit-user-select: none;">
<p>Showing how to use transform methods on the HTML5 Canvas Context to selectively zoom in and out. Drag to pan. Click to zoom at that location. Shift-click to zoom out. Mousewheel up/down over the canvas to zoom in to/out from that location.</p>
<p>By redrawing the canvas at different scales the strokes remain smooth during zooming. For example, zoom in on the earring or circle on the forehead to see fine detail.</p>
<canvas width="800" height="600"></canvas>
<p id="footer">Copyright © 2011 <a href="mailto:!@phrogz.net">Gavin Kistner</a>. Written to support <a href="http://stackoverflow.com/questions/5189968/zoom-to-cursor-calculations/5526721#5526721">this Stack Overflow answer</a>.</p>
<script type="text/javascript" charset="utf-8">
	var canvas = document.getElementsByTagName('canvas')[0];
	canvas.width = 800; canvas.height = 600;
	var gkhead = new Image;
	var ball   = new Image;
	window.onload = function(){		
		var ctx = canvas.getContext('2d');
		trackTransforms(ctx);
		function redraw(){
			// Clear the entire canvas
			var p1 = ctx.transformedPoint(0,0);
			var p2 = ctx.transformedPoint(canvas.width,canvas.height);
			ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

			// Alternatively:
			// ctx.save();
			// ctx.setTransform(1,0,0,1,0,0);
			// ctx.clearRect(0,0,canvas.width,canvas.height);
			// ctx.restore();

			ctx.drawImage(gkhead,50,50);//punct stanga sus imagine cu...