The image has a large size client_width> 1920 and client_height height> 1080. And the canvas is 1920x1080. How to use javascript function drawimage () to transfer such an image completely without cropping to such a new canvas?

<canvas id="img" name="img" width="1920" height="1080"></canvas> <img id="duble_img" src="photo.jpg">

    1 answer 1

    The drawImage () method takes dWidth and dHeight parameters. They are responsible for the dimensions of the image on the canvas.

    If your image has the same aspect ratio as the canvas

     let img = document.getElementById("duble_img"); canvas.drawImage(img, 0, 0, 1920, 1080);

    If the aspect ratio does not match, then you need to calculate the width or height to keep the image proportions

     let img = document.getElementById("duble_img"); let ratio = img.clientWidth / img.clientHeight; //соотношение сторон img let width = 1920; let height = widht/ratio; canvas.drawImage(img, 0, 0, width , height);