How to Resize Images in Canvas

In Canvas, the drawImage() method can be used to draw and scale images. The method takes three parameters: the image object to be drawn, the x-coordinate of the position to draw it, and the y-coordinate of the position to draw it. Additionally, the drawImage() method also has two optional parameters: the width and height of the image to be drawn.

The scaling effect of an image can be achieved by adjusting the width and height of the image being drawn. The specific steps are as follows:

1. To get the context of the canvas, use: var ctx = canvas.getContext(‘2d’);
2. Create an Image object and set the source of the image: var img = new Image(); img.src = ‘image_path’;
3. After the image is loaded, use the drawImage() method to draw the image onto the Canvas: ctx.drawImage(img, x, y, width, height);

x and y represent the starting coordinates for drawing the image, while width and height indicate the width and height of the image to be drawn. You can adjust these four parameters to change the position and size of the image, thereby achieving a zoom effect.

By adjusting the values of the width and height, you can scale the image proportionally. For example, multiplying both the width and height of the image by 0.5 can reduce the image to half of its original size.

var width = img.width * 0.5;
var height = img.height * 0.5;
ctx.drawImage(img, x, y, width, height);

Caution: calling the drawImage() method before the image is fully loaded may result in the image not displaying. To ensure the image is loaded before drawing it to the Canvas, you can perform the drawing operation in the img object’s onload event.

img.onload = function() {
  var width = img.width * 0.5;
  var height = img.height * 0.5;
  ctx.drawImage(img, x, y, width, height);
};