JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<p id = "width"></p>
<button type = "button" onclick = "zoom(-3)">-</button>
<button type = "button" onclick = "zoom(3)">+</button>
<canvas id = "canvas" width = "600" height = "300"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let img = new Image();
img.src = "https://images-na.ssl-images-amazon.com/images/I/61zZxX3nL-L._AC_.jpg";
let mX = 0;
let mY = 0;
let size = 0;
document.addEventListener("mousemove", function moved(e) {
if ((e.clientX * 2.3) - 220 > 220 + size) {
	mX = size;
} else {
	mX = e.clientX * 2.3 + ; 
}
mY = e.clientY;
});
function zoom(s) {
	size += s;
}
function render() {
ctx.clearRect(0, 0, 1000, 1000);
  if (mX - 220 < 0) {
  	ctx.drawImage(img, 0, 96 * 1, 220, 96, 400, 10, mX - 220 - size, 96 + size);
  } else {
    ctx.drawImage(img, 0, 96 * 0, 220, 96, 400, 10, mX - 220 + size, 96 + size);
  }
  document.getElementById("width").innerHTML = mX;
}
setInterval(render, 10);
</script>
</body>
</head>
</html>