Skip to content Skip to sidebar Skip to footer

How To Set Background Size Cover On A Canvas

I'm using a canvas to make blur effect on boostrap carousel images. Basically, carousel images are set to background size cover so image will crop according to window size. I want

Solution 1:

This snippet should do the trick.

var aspectheight = h * (canvas.width / w);
var heigthoffset = ((aspectheight - canvas.height) / 2) * -1;
ctx.drawImage(image, 0, heigthoffset, canvas.width, aspectheight);

Where h and w are the width and height if the image being rendered, and image is that image.

Post a Comment for "How To Set Background Size Cover On A Canvas"