How to set background size cover on a canvas

Question

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 to do the same to the canvas image. Any ideas? Thanks heaps!

Answer 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.