What is the relationship between canvas scale and canvas size?

Question

I have 240x157 png, and the div size is 120x88

So, I made a 240x157 canvas and pasted the png.

The size of the div is smaller than that of the png, but the div has a scroll bar, and I can use the drag bar to see the entire image. This is perfect.

var ctx = $('canvas')[0].getContext('2d');
console.log("test")

var chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town,_c._1900.jpg?dl=0";

chara.onload = () => {
      ctx.clearRect(0, 0,240,157);
      ctx.drawImage(chara,0,0,240,157);

 }

#whole{
border:1px solid;
  width:120px;
  height:78px;
  overflow:scroll;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script>
<div id="whole">
<canvas id="test" width="240px" height="157px"></canvas>
</div>

My ultimate goal is to change the proportion by the user, and when the image is larger than the div, a scroll bar will appear, like photoshop, etc.

So, I tested the 1/2 scale and saw that the whole image looked successful at 129 x78

Area.

Why is this happening?

In my understanding, when the canvas size is 240x157 and the ratio is 1/2, 120x78 should appear. Why is only the picture shrinking? Rather than the canvas itself?

var ctx = $('canvas')[0].getContext('2d');
console.log("test")

var chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town,_c._1900.jpg?dl=0";

ctx.scale(1/2,1/2) // adding here.

chara.onload = () => {
      ctx.clearRect(0, 0,240,157);
      ctx.drawImage(chara,0,0,240,157);

 }

#whole{
border:1px solid;
  width:120px;
  height:78px;
  overflow:scroll;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script>
<div id="whole">
<canvas id="test" width="240px" height="157px"></canvas>
</div>

Answer 1

You forgot to change the size of the canvas and set overflow:auto so the scrollbar disappears:

const canvas = $('canvas')[0];

var ctx = canvas.getContext('2d');
console.log("test")

var chara = new Image();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";

$zoom.addEventListener('input', () =>{

  const zoom = $zoom.value * .5;

  canvas.width = 240 * zoom;
  canvas.height = 157 * zoom;

  ctx.scale(zoom,zoom) // adding here.

  ctx.clearRect(0, 0,240,157);
  ctx.drawImage(chara,0,0,240,157);


});


chara.onload = () => { 
      ctx.clearRect(0, 0,240,157);
      ctx.drawImage(chara,0,0,240,157);

 }

#whole{
  border:1px solid;
  width:120px;
  height:78px;
  overflow:auto;
  
}
canvas{
margin:0;
display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="$zoom" type="range" min="1" max="10" value="2">
<div id="whole">
<canvas id="test" width="240px" height="157px"></canvas>
</div>