A distorted image is drawn

Question

Html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>

  <link rel="stylesheet" href="css/main-1.css">
  <section id="fitting-room-section">
    <canvas class="n-canvas" id="fitting-room-canvas"></canvas>
  </section>  
  
  
  <button type="button" class="n-button">Click Me!</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  
  
</head>

<body>
  <!-- your content here... -->
  
  <script src="js/script-1.js"></script>
</body>
</html>

CSS:

.n-canvas {
    width: 100%;
    height: 100%;
    max-width: 300px;
    min-height: 400px;  
    background-color: red;
}

JS:

$( document ).ready(function() {    

    function drawImageScaled() {    
        let canvas = document.getElementById('fitting-room-canvas');    
        let ctx = canvas.getContext('2d');
    
        let img = new Image();
        img.src = 'img/bob.png';    
    
        img.onload = function(){
          let imgWidth = canvas.width * (2 / 3); // Image width occupies two-thirds of the canvas width.
          var ratio = imgWidth / img.width; // How much we shall shrink the image.
          let imgHeight = img.height * ratio; // Shrink the image hight as much as the image width.       
          ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
        }
      }
    
    jQuery( ".n-button" ).on( "click", drawImageScaled);
    
    console.log( "ready!" );
});

Problem

The hairstyle is distorted. I just wanted to shrink it proportionally and draw. My arithmetic seems to be OK. To the best of my ability.

My supposition about the cause of the problem is that the canvas is actually 400. But in JavaScript, it is somehow determined as being 150. Could this be the cause of the distortion?

You are stretching your canvas with `max-width: 300px;` and `min-height: 400px; ` Better use `` — Konrad, Jun 21 '23 at 14:41
You don't need to calculate a ratio. If you just adjust either the height or width, whichever one you didn't explicitly set will automatically adjust to keep the ratio intact. — Scott Marcus, Jun 21 '23 at 14:45

score 0 · Answer 1 · answered Jun 21 '23 at 15:02

Remove max-width: 300px; or min-height: 400px; and add width and height to the canvas

$(document).ready(function() {

  function drawImageScaled() {
    let canvas = document.getElementById('fitting-room-canvas');
    let ctx = canvas.getContext('2d');

    let img = new Image();
    img.src = 'https://i.stack.imgur.com/4tltn.png';

    img.onload = function() {
      let imgWidth = canvas.width * (2 / 3); // Image width occupies two-thirds of the canvas width.
      var ratio = imgWidth / img.width; // How much we shall shrink the image.
      let imgHeight = img.height * ratio; // Shrink the image hight as much as the image width.       
      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
    }
  }

  jQuery(".n-button").on("click", drawImageScaled);

});

.n-canvas {
  width: 100%;
  height: 100%;
  max-width: 300px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="fitting-room-section">
  <canvas width="300" height="400" class="n-canvas" id="fitting-room-canvas"></canvas>
</section>


<button type="button" class="n-button">Click Me!</button>

Sidenote: Your html is invalid. You tags should be in <body> not in <head>

A distorted image is drawn

1 Answers1