How to crop image in canvas?

Question

JavaScript

Here is an example: vintagetechnics.ru/comment

When you click on add your review, you can add a picture and it will be loaded as a preview using canvas

. I did something similar: https://codepen.io/Genri_Rus/pen/vYLGxzV

But the problem is that it is highly compressed, an example of a picture:

spoiler

How to do exactly the same?


Those. it is slightly cropped at the top and bottom

Answer 1

For canvas, you need to set the size of the image, or the target size of the image if you want to do something with it. Next, on CSS, set the canvas to the desired size so that it fits normally into the block.

img.onload = function() {
  canvas.width  = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
};