How to resize an image with JavaScript canvas?

Spread the love

Sometimes, we want to resize an image with JavaScript canvas.

In this article, we’ll look at how to resize an image with JavaScript canvas.

How to resize an image with JavaScript canvas?

To resize an image with JavaScript canvas, we use the createImageBitmap function.

For instance, we write

const imageBitmap = await createImageBitmap(document.getElementById("image"), {
  resizeWidth: 300,
  resizeHeight: 234,
  resizeQuality: "high",
});
document.getElementById("canvas").getContext("2d").drawImage(imageBitmap, 0, 0);

to call createImageBitmap with the image element and an object with the resize options.

Then we get the canvas with getElementById.

Next we get the canvas’ context with getContext.

Finally, we call drawImage to draw the imageBitmap onto the canvas.

Conclusion

To resize an image with JavaScript canvas, we use the createImageBitmap function.

Leave a Reply

Your email address will not be published. Required fields are marked *