Изображение в масштабе холста, затем нарисуйте линии

Question

Рисую на холсте. Пользователь может писать на картинке. Пока все работает, линия рисуется там, где пользователь касается экрана.

Но если я сейчас изменю масштаб и нарисую картинку, картинка будет больше, но линия больше не появится там, где пользователь двигается экран. Вместо этого он появляется немного дальше вверх / вниз по фактической позиции в зависимости от того, где вы рисуете.

Я пытаюсь настроить значения currentX / currentY с умножением на масштаб, но это не работает.

Возможно вы можете помочь мне найти проблему.

Вот мой код.

scale = 1.2;

   drawImage {
       this.canvasElement = document.getElementById("canvas")
        var image = new Image();
        image.crossOrigin = "Anonymous";
        var canvas = this.canvasElement;
        var ctx = this.canvasElement.getContext("2d");
        let scale = this.scale;

        image.src = imageUrl;

            image.onload = function() {
                canvas.height = image.height * scale; /multiply with scale to show full image
                canvas.width = image.width * scale;   /multiply with scale to show full image
                ctx.scale(scale,scale)
                ctx.drawImage(image, 0, 0);
            
            };
    }

startDrawing(ev) {
        var canvasPosition = this.canvasElement.getBoundingClientRect();

        this.saveX = (ev.pageX   - canvasPosition.x) ;
        this.saveY = (ev.pageY - canvasPosition.y)
    }

    moved(ev) {
        var canvasPosition = this.canvasElement.getBoundingClientRect();
        let ctx = this.canvasElement.getContext("2d");

        let currentX = (ev.touches[0].pageX - canvasPosition.x) ;
        let currentY = (ev.touches[0].pageY - canvasPosition.y) ;

        ctx.lineJoin = "round";
        ctx.strokeStyle = this.selectedColor; //black
        ctx.lineWidth = this.lineWidth; //3

        ctx.beginPath();
        ctx.moveTo(this.saveX, this.saveY);
        ctx.lineTo(currentX, currentY);
        ctx.closePath();

        ctx.stroke();

        this.saveX = currentX;
        this.saveY = currentY;
    }

И мой Html

 <canvas id="canvas" (touchstart)="startDrawing($event)"
            (touchmove)="moved($event)"></canvas>