If you update visual properties like the scale inside a for-loop, it literally happens at all once - not really of couse but way faster than the eye. The screen does not get updated with each iteration of your for-loop. It's more like before calling the scale() function and after it' finished (also not really but you get the idea).

To make those changes visible you need to do 'em over time. For example at start time 1.0 set the scale to 1, at 1.1 set it to 1.01, at 1.2 set it to 1.02 and so on until reaching your target scale. This can be done by using either the setInterval() or requestAnimationFrame() function. setInterval takes two arguments, the function to call and the time when to call this function in milliseconds. requestAnimationFrame tries to call the supplied function at the refreshrate of your display - so if it`s a 60hz display it will be called close to 60 times a second.

If we modify your example to take advantage of the requestAnimationFrame function:

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

document.getElementById("scaleUp").onclick = () => {
  cancelAnimationFrame(animationID);
  scale("zoomIn");
}
document.getElementById("scaleDown").onclick = () => {
  cancelAnimationFrame(animationID);
  scale("zoomOut");
}

let scaleAmount = 1.0;
let animationID;

function scale(direction) {
  let animationReady = false;
  let targetScale;
  if (direction == "zoomIn") {
    scaleAmount += 0.01;
    targetScale = 2;
    animationReady = scaleAmount >= targetScale;
  }
  if (direction == "zoomOut") {
    scaleAmount -= 0.01;
    targetScale = 1;
    animationReady = scaleAmount <= targetScale;
  }

  if (animationReady) {
    scaleAmount = targetScale;
  } else {
    animationID = requestAnimationFrame(() => {
      scale(direction);
    });
  }
  stageUpdate();
}

function stageUpdate() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.scale(scaleAmount, scaleAmount);
  ctx.beginPath();
  ctx.arc(0, 0, 45, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();
}

stageUpdate();

<button id="scaleUp" type="button">Scale +</button><button id="scaleDown" type="button">Scale -</button><br><canvas id="canvas" width="320" height="200"></canvas>

@obscure Your answer was really helpful, thanks.

My final code looks like this:

let scaleAmount = 1.00;
let scaleAnimation;
let animationReady = false;
let scalePercent =  parseInt(scaleSize.innerText.replace("%",""));
function scaleUpdate()
{
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.scale(scaleAmount, scaleAmount)   
    
    scaleSize.innerText = parseInt(parseFloat(scaleAmount.toFixed(1))*100)+"%";

    stageUpdate();  
   
}

function scale(direction)
{
    
    
    let targetScale ;

    if(direction=="zoomIn")
    { 
            targetScale = scalePercent / 100 + 0.1;
            
            scaleAmount += 0.01;
        
            animationReady = scaleAmount > targetScale;
            targetScale= parseFloat(targetScale.toFixed(3));
            scaleAmount = parseFloat(scaleAmount.toFixed(3));
            dx += scaleAmount;
            dy += scaleAmount;   
    }
    if(direction=="zoomOut")
    {
            targetScale = scalePercent / 100 - 0.1;

            scaleAmount -= 0.01;
           
            animationReady = scaleAmount < targetScale;
            targetScale= parseFloat(targetScale.toFixed(3));
            scaleAmount = parseFloat(scaleAmount.toFixed(3));
            dx -= scaleAmount;
            dy -= scaleAmount;
    }
 
    if (animationReady) {
        scaleAmount = targetScale;
        scalePercent =  parseInt(scaleSize.innerText.replace("%",""));
    } else {
        scaleAnimation = requestAnimationFrame(() => {
            scaleUpdate();
            scale(direction);
         });
    }
}