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;">
<canvas width="800" height="600"></canvas>
<script type="text/javascript" charset="utf-8">
var start_x = start_y = position_x = position_y = 50;
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 800;
canvas.height = 600;
var gkhead = new Image;
var ball = new Image;
var square_size = 10;
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);
ctx.drawImage(gkhead, 50, 50);//punct stanga sus imagine cu marton
//console.log(ctx);
color = 'ff0000';
w = gkhead.width;
//console.log(w);
h = gkhead.height;
//console.log(h);
var i = 0;
i = i + 1;
if (i == 1)
color = 'ff0000';
if (i == 2)
color = '00ff00';
if (i == 3) {
color = '0000ff';
...