Sometimes, we want to zoom with HTML5 Canvas and JavaScript.

In this article, we’ll look at how to zoom with HTML5 Canvas and JavaScript.

How to zoom with HTML5 Canvas and JavaScript?

To zoom with HTML5 Canvas and JavaScript, we call drawImage with different image dimensions.

For instance, we draw the initial image with

ctx.drawImage(
  img,
  0,
  0,
  img.width,
  img.height,
  0,
  0,
  canvas.width,
  canvas.height
);

where img is the image element with the image.

The 2nd and 3rd arguments are the x and y coordinates of the top left corner.

The next 2 arguments are the image width and height.

Then when we zoom, we call drawImage by writing

ctx.drawImage(
  img,
  img.width / 4,
  img.height / 4,
  img.width / 2,
  img.height / 2,
  0,
  0,
  canvas.width,
  canvas.height
);

to change the top left corner coordinate values and the image’s size.

Conclusion

To zoom with HTML5 Canvas and JavaScript, we call drawImage with different image dimensions.