How to Simulate CSS `background-size: cover` Using Canvas?

Simulating CSS "background-size: cover" on Canvas

This question addresses the challenge of stretching images on a canvas when rendered without maintaining their original aspect ratio. To achieve the desired behavior of "background-size: cover," as seen in CSS, we provide a custom JavaScript function.

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
  // Logic to determine new width, height, and offsets for proportional image scaling
  // ... [code omitted for brevity]

  ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}

Usage:

drawImageProp(ctx, image, 0, 0, width, height);

This function will proportionally scale the image to fit within the container.

To adjust the image offset, specify additional parameters:

var offsetX = 0.5; // center x
var offsetY = 0.5; // center y
drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);

The above is the detailed content of How to Simulate CSS `background-size: cover` Using Canvas?. For more information, please follow other related articles on the PHP Chinese website!