How to Implement Image Zoom using HTML5 Canvas and JavaScript

 

Photo by Mohamed Elshiekh: https://www.pexels.com/photo/city-sunset-art-building-16247029/

To implement image zoom using HTML5 canvas, you can follow these steps:

1. Load the image using JavaScript's Image object and wait for it to load completely.
2. Create a canvas element using HTML and set its width and height to the size of the image.
3. Draw the image onto the canvas using the drawImage() method.
4. Add an event listener for the mousewheel event to the canvas element.
5. In the event listener, determine the direction of the scroll using the deltaY property of the event object.
6. Calculate the new scale factor for the image based on the direction of the scroll and the current scale factor.
7. Clear the canvas and redraw the image at the new scale factor using the drawImage() method.

Here's some sample code to get you started:

HTML:

<canvas id="myCanvas"></canvas>

JavaScript:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'path/to/image.jpg';

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  let scaleFactor = 1;

  canvas.addEventListener('mousewheel', function(event) {
    const delta = Math.sign(event.deltaY);
    scaleFactor += delta * 0.1; // change this value to adjust zoom speed
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor);
  });
};

This code will create a canvas element and load an image onto it. When the user scrolls with the mouse wheel, the image will be scaled up or down and redrawn on the canvas. You can adjust the scaleFactor and the delta value to customize the zoom behavior.