为什么我的图像没有填满整个画布的宽度？

Question

I want my canvas to fill the whole screen width. But it is not working correctly.

 const html = document.documentElement; const canvas = document.getElementById("canvas-test"); const context = canvas.getContext("2d"); const img = new Image() img.src = "../img/runningPersonAnimation/Komp 2_00020.png"; canvas.width = window.innerWidth; canvas.height = window.innerHeight; img.onload = function() { context.drawImage(img, 0, 0); }

 .body { margin: 0; padding: 0; }

 <canvas id="canvas-test"></canvas>

As intended, my canvas fills the whole screen. Why is that not the case with the image?

How it looks at the moment:

Answer 1

It may be to do with the width of the image. If you were to make it the full width of the canvas it would look very stretched out. Try an image with the same dimensions as the canvas and see what it looks like.

Answer 2

The aspect ratio of the image is off, but you can use the background-image: property in CSS, the picture would look zoomed in though and perhaps a bit pixelated:

  background-image: url('../img/yourimg.png');
  background-size: cover; /* this can be changed to percentages, such as  background-size: 50% 50%;*/
  background-position: center center;
  background-repeat: no-repeat;

Keep in mind this doesn't hold any semantic value though

Answer 3

I fixed my problem by resizing the image while using drawImage.

js:

const img = new Image()
img.src = currentFrame(20);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload=function(){
  context.drawImage(img, 0, 0, window.innerWidth, window.innerWidth * 0.66666666666); 
}

By multiplying my window.innerWidth with 0.66666666666 I get to keep my ratio, so the image does not seem stretched.