JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" tabindex="1"/>
JavaScript
function matrixMultiplication(matrix) {
var temp = [];
var i, j, k, sum;
for (i = 0; i <= 2; i++) {
for (j = 0; j <= 2; j++) {
sum = 0;
for (k = 0; k <= 2; k++) {
sum = sum + transform[i*3+k] * matrix[k*3+j];
}
temp[i*3+j] = sum;
}
}
transform = temp;
}
function inverseTransform() {
var det = transform[0] * (transform[4] * transform[8] - transform[7] * transform[5]) -
transform[1] * (transform[3] * transform[8] - transform[5] * transform[6]) +
transform[2] * (transform[3] * transform[7] - transform[4] * transform[6]);
if (det == 0)
return [1,0,0,0,1,0];
var invdet = 1 / det;
var inverted = [];
inverted[0] = (transform[4] * transform[8] - transform[7] * transform[5]) * invdet;
inverted[1] = (transform[2] * transform[7] - transform[1] * transform[8]) * invdet;
inverted[2] = (transform[1] * transform[5] - transform[2] * transform[4]) * invdet;
inverted[3] = (transform[5] * transform[6] - transform[3] * transform[8]) * invdet;
inverted[4] = (transform[0] * transform[8] - transform[2] * transform[6]) * invdet;
inverted[5] = (transform[3] * transform[2] - transform[0] * transform[5]) * invdet;
inverted[6] = (transform[3] * transform[7] - transform[6] * transform[4]) * invdet;
inverted[7] = (transform[6] * transform[1] - transform[0] * transform[7]) * invdet;
inverted[8] = (transform[0] * transform[4] - transform[3] * transform[1]) * invdet;
return inverted;
}
function transformPoint(point) {
var inverse = inverseTransform();
return {x:point.x * inverse[0] + point.y * inverse[1] + inverse[2],
y:point.x * inverse[3] + point.y * inverse[4] + inverse[5]};
}
function zoom(direction) {
var scaledMouse = transformPoint(mouse);
matrixMultiplication([1, 0, scaledMouse.x,
0, 1, scaledMouse.y,
0, 0, 1]);
var scale = 1.2;
if (direction) {
matrixMultiplication([scale, 0, 0,
...