JavaScript Answers

How to resize an image with JavaScript canvas?

Spread the love

Resizing an image using JavaScript and the HTML canvas element involves creating a canvas, drawing the image onto it with the desired dimensions, and then converting the canvas back to an image.

For example, we write:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resize Image with Canvas</title>
    <!-- Original image -->
    <img id="originalImage" src="original.jpg" alt="Original Image">

        // Function to resize the image
        function resizeImage() {
            // Get the original image element
            var originalImage = document.getElementById('originalImage');
            // Create a canvas element
            var canvas = document.createElement('canvas');
            // Get the canvas context
            var ctx = canvas.getContext('2d');
            // Set the canvas dimensions to the desired size
            var newWidth = 300; // New width of the image
            var newHeight = 200; // New height of the image
            canvas.width = newWidth;
            canvas.height = newHeight;
            // Draw the image onto the canvas with the new dimensions
            ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);
            // Convert the canvas back to an image
            var resizedImage = new Image();
            resizedImage.src = canvas.toDataURL(); // Convert canvas to data URL
            // Append the resized image to the document

        // Call the resizeImage function when the page loads
        window.onload = resizeImage;

In this example, we have an <img> element with the ID originalImage, representing the original image that we want to resize.

We define a resizeImage() function that will be called when the page loads.

Inside the function, we create a canvas element using document.createElement('canvas').

We set the dimensions of the canvas to the desired size for the resized image.

Then we get the 2D rendering context of the canvas using getContext('2d').

Next we draw the original image onto the canvas with the drawImage() method, specifying the new dimensions.

And we convert the canvas back to an image by creating a new Image object and setting its src attribute to the data URL obtained from the canvas (canvas.toDataURL()).

  • Finally, we append the resized image to the document.

When the page loads, the resizeImage() function will be called, and the resized image will be displayed on the page.

Adjust the newWidth and newHeight variables to set the desired dimensions for the resized image.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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