[SuperZen]

<style>
  canvas {
    border: 1px solid #000;
  }
</style>
<canvas id="myCanvas" width="400" height="400"></canvas>
<button id="resizeButton">resize button</button>

<script>
  var canvas = document.getElementById("myCanvas")
  var ctx = canvas.getContext("2d")

  function update() {
    ctx.fillStyle = "#FF0000"
    ctx.fillRect(0, 0, 150, 75)
  }

  document.getElementById('resizeButton').addEventListener('click', () => {
    canvas.width = 600
    update()
  })

  update()
</script>

без перерисовки не получится...

если делать финт ушами

<style>
  canvas {
    border: 1px solid #000;
    width: 100%;
    height: 100%;
  }

  .canvasWrapper {
    width: 40px;
    height: 40px;
    border: 1px solid #0f0
  }
</style>
<div class="canvasWrapper">
  <canvas id="myCanvas"></canvas>
</div>
<button id="resizeButton">resize button</button>

<script>
  var canvas = document.getElementById("myCanvas")
  var ctx = canvas.getContext("2d")

  var canvasWrapper = document.querySelector('.canvasWrapper')

  function update() {
    ctx.fillStyle = "#FF0000"
    ctx.fillRect(0, 0, 50, 50)
  }

  document.getElementById('resizeButton').addEventListener('click', () => {
    // canvas.width = 600
    console.log(canvasWrapper)
    canvasWrapper.style.width = '100px'
    // update()
  })

  update()
</script>

тогда меняется перспектива )