Canvas zoom to any coordinates

First of all, I did tons of research but I only found this topic related to Mouse positions.

I have a canvas element and I’m doing some zooming stuff with it (while clicking, scrolling etc.)

This function below shows how the zooming works.

    zoom(clicks) {;
        var pt = this.ctx.transformedPoint(this.X, this.Y);
        this.ctx.translate(pt.x, pt.y);
        var factor = Math.pow(this.scaleFactor, clicks);
        this.ctx.scale(factor, factor);
        
        this.totalzoom *= factor;
        this.ctx.translate(-pt.x, -pt.y);
        this.reDraw();
    }

X means mouseX

Y means mouseY

this.X = evt.offsetX;
this.Y = evt.offsetX;

These are working really fine until I want to use this functions to zoom only to a unique position. I edited my code like this to make it work somehow:

    zoomToItem(x,y){

        var pt = this.ctx.transformedPoint(x, y);
        this.ctx.translate(pt.x, pt.y);
        var factor = Math.pow(this.scaleFactor, 10);
        this.ctx.scale(factor, factor);
        
        this.totalzoom *= factor;
        this.ctx.translate(-pt.x, -pt.y);
        this.reDraw();
    }

The real problem is that in the original view the coordinates what I give is proper, but as I mentioned I scale the image to fit in the canvas, so the given coordinates won’t be proper anymore.

Here’s an example what I tried:

let transform = this.Core.Draw.ctx.getTransform();

let X = (this.item[i].x - this.rects.left - transform.e) / transform.a; 
let Y = (this.item[i].y - this.rects.top - transform.f) / transform.d;

this.zoomToItem(X,Y);