Scaling an image to fit on canvas

html

responsive-design

canvas

image-scaling

byNikita Barsukov·Mar 5, 2025

Use this JavaScript snippet to resize an image to fit a canvas while maintaining its aspect ratio:

const canvas = document.getElementById('canvasID');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
  let scale = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * scale) / 2;
  let y = (canvas.height - img.height * scale) / 2;
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Cleaning up after the last artist's masterpiece
  ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
};

img.crossOrigin = "Anonymous"; // No passport required
img.src = 'image.jpg'; // Replace with your image

We load the image, set the scaling factor, calculate the center (x, y) points and draw our newly resized image on the canvas.

Breaking down the code

This part explains how the code snippet works, the reason for each part of the code, and how all the different parts come together to scale and position the image on the canvas.

Keeping the image proportions

The aspect ratio (width:height) of an image defines its shape. It's crucial to maintain this as we resize the image, otherwise, our image may look squashed or stretched. We use Math.min() to get the smaller ratio between the canvas and the image, ensuring a perfect scale without any distortions.

Preserving image quality

Scaling can sometimes impact the quality of the image. The quality can be maintained using the imageSmoothingEnabled property of the canvas's context, which prevents unwanted blurring.

Handling images from different sources

Images may come from different sources, and we may run into some struggles with cross-origin requests. But hey, not all heroes wear capes, and this is where our crossOrigin attribute comes in - setting this to "Anonymous" allows us to bypass these restrictions.

Keeping it clean

Before we let our artistic aspirations run wild, the canvas needs a good clean. Hence, we use clearRect() to wipe clean any existing drawings.

Placing the image

We want our artwork to be front and center for all to see. So, to center the image on the canvas, we calculate the x and y coordinates.

Going the Extra Mile With Image Scaling

Showing off your entire masterpiece

To get your art displayed in all its glory, we adjust the size of our drawing area by setting the destination rectangle size in the drawImage method. A little bit of dynamic calculations give us the perfect offsets x and y to place the image, keeping it happily centered on the canvas.

Pack Up, Not Down

After an art session, you'd clear up, right? The same goes for canvas! After we're done scaling and drawing, we want to reset the canvas scale as if nothing ever happened. To do this, we apply the inverse of the scaling factor.

Exact Placement

Now, sometimes the place needs a little adjusting, maybe a rug here, a plant there. For accurate positioning, we use the offsetX and offsetY properties, which account for additional elements like borders or padding within the canvas area.

Canvas on the Fly

Occasionally, we might need to quickly whip out a new canvas for a burst of inspiration. In such cases, we create a canvas element dynamically. This gives us the ability to manage multiple canvases or programmatically adjust the page content.

Scaling in a Responsive World

And finally, in an ever-changing device landscape, it's crucial to keep our artwork responsive. In such cases, we can use CSS media queries or even background-size: cover to keep our aspect ratios accurate within the canvas.

explain-codes / Html / Scaling an image to fit on canvas

Linked

Html5 Pre-resize images before uploading



Html5 Canvas Resize (Downscale) Image High Quality?



Get the real width and height of an image with JavaScript? (in Safari/Chrome)



How to resize images proportionally / keeping the aspect ratio?



How to set max width of an image in CSS

