Как реализовать увеличение и уменьшение масштаба html5 canvas?

Question

Я пытаюсь создать функцию увеличения и уменьшения изображения для веб-приложения. Увеличение и уменьшение масштаба работают отдельно без каких-либо проблем.

Проблема появляется при увеличении 5 или 6 раз, а затем при уменьшении также работает в режиме увеличения до тех пор, пока scaleValue не станет 1. Если вы проверьте пример приложения, вы увидите четкую проблему ясно. Кто-нибудь знает, что происходит? мне не хватает какой-либо точки?

пример приложения или пример кода

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'POC';
  canvas: HTMLCanvasElement;
  canvasContext: CanvasRenderingContext2D;
  canvasImage: any;
  imageUrl: string;
  scaleValue = 1;
  scaleMultiplier = 0.9;

  constructor() { }

  ngOnInit(): void {}

  ngAfterViewInit() {
    this.initCanvas();
  }

// canvas
  zoomIn(): void {
    this.canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.scaleValue = this.scaleValue / this.scaleMultiplier;
    this.canvasContext.scale(this.scaleValue, this.scaleValue);
    console.log(this.scaleValue, this.scaleValue);
    this.drawGrid();
  }

  zoomOut(): void {
    this.canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.scaleValue = this.scaleValue * this.scaleMultiplier;
    this.canvasContext.scale(this.scaleValue, this.scaleValue);
    this.drawGrid();
  }

  drawGrid(): void {
    this.canvasContext.drawImage(this.canvasImage, 0, 0);
    this.canvasContext.restore();
    window.URL.revokeObjectURL(this.imageUrl);
  }

  initCanvas() {
    this.canvas = document.getElementById('swimLane') as HTMLCanvasElement;
    this.canvasContext = this.canvas.getContext('2d');
    this.canvasContext.canvas.width  = 1600;
    this.canvasContext.canvas.height = 500;

    const data = '<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> \
      <defs> \
          <pattern id="smallGrid" width="20" height="20" patternUnits="userSpaceOnUse"> \
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="gray" stroke-width="0.5" /> \
          </pattern> \
          <pattern id="grid" width="240" height="240" patternUnits="userSpaceOnUse"> \
              <rect width="240" height="240" fill="url(#smallGrid)" /> \
              <path d="M 240 0 L 0 0 0 240" fill="none" stroke="gray" stroke-width="1" /> \
          </pattern> \
      </defs> \
      <rect width="100%" height="100%" fill="url(#grid)" /> \
  </svg>';

    this.canvasImage = new Image();
    const svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    const url = window.URL.createObjectURL(svg);

    this.canvasImage.onload = () => {
      this.drawGrid();
    };
    this.canvasImage.src = url;
  }
}

html

<div>
  <h1>
    Canvas Test
  </h1>
  <button mat-stroked-button color="success" (click)="zoomIn()">+</button>
  <button mat-stroked-button color="success" (click)="zoomOut()">-</button>

  <div class="canvas-test" id="scrollable" style="position: relative">
    <div [style.width]="(240 * scaleValue) + 'px'" style=" height: 60px;top: 150px;left:180px;z-index: 1; background: red;position: absolute"></div>

    <div style="width: 500px; height: 60px;top: 220px;left:100px;z-index: 1; background: yellow;position: absolute"></div>
    <canvas width="100%" height="800px" id="swimLane"></canvas>
  </div>
</div>