Getting an ugly image when simulating a cover in a canvas

Question

I am trying to display an image using cover simulation in canvas. I found a great answer on how to do this.

The thing is, when I do this with a large picture, it displays ugly. How to fix it?

Here is my codepen

HTML

 <canvas id="canvas"></canvas> 

CSS

  canvas { width: 100%; height: 100vh; } 

Js

 var ctx = canvas.getContext('2d'), img = new Image; img.onload = draw; img.src = 'https://upload.wikimedia.org/wikipedia/commons/0/0f/2010-02-19_3000x2000_chicago_skyline.jpg'; function draw() { drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height); //drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height, 0.5, 0.5); } /** * By Ken Fyrstenberg * * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) * * If image and context are only arguments rectangle will equal canvas */ function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { if (arguments.length === 2) { x = y = 0; w = ctx.canvas.width; h = ctx.canvas.height; } /// default offset is center offsetX = offsetX ? offsetX : 0.5; offsetY = offsetY ? offsetY : 0.5; /// keep bounds [0.0, 1.0] if (offsetX < 0) offsetX = 0; if (offsetY < 0) offsetY = 0; if (offsetX > 1) offsetX = 1; if (offsetY > 1) offsetY = 1; var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), nw = iw * r, /// new prop. width nh = ih * r, /// new prop. height cx, cy, cw, ch, ar = 1; /// decide which gap to fill if (nw < w) ar = w / nw; if (nh < h) ar = h / nh; nw *= ar; nh *= ar; /// calc source rectangle cw = iw / (nw / w); ch = ih / (nh / h); cx = (iw - cw) * offsetX; cy = (ih - ch) * offsetY; /// make sure source rectangle is valid if (cx < 0) cx = 0; if (cy < 0) cy = 0; if (cw > iw) cw = iw; if (ch > ih) ch = ih; /// fill image in dest. rectangle ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); } 

Answer 1

You can use several methods for this, such as HTML / CSS, only CSS, JQuery or JS / Canvas. Read more about this here .

You should not set the width and height of your canvas in HTML, as mentioned by David Skiks in it. You need to remove your CSS, completely remove it.

In your JS, you should set the canvas size (just define it in 1 place, don't let other languages ​​interfere):

 var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; 

A window means the entire browser. Use pixels here if you want to limit it to just the canvas and not the entire background.

What all.

Answer 2

You must specify the width and height in pixels directly on the <canvas> -Element element, otherwise it will distort it:

 <canvas id="canvas" width="500" height="500"></canvas> 

Use JavaScript to measure the width and height of a window and set it dynamically. Sort of:

 var canvas = document.getElementById('canvas'); canvas.setAttribute('width', window.innerWidth); canvas.setAttribute('height', window.innerHeight); 

UPDATE: As Matthijs van Hest noted, the width and height attributes on the <canvas> are optional.