Position of flipped sprite is wrong in canvas, JavaScript

I can't figure out why I have this problem. A little overview first: the draw function under needs to draw an image, if "centerEnabled" true the image will be drawn from the center of it, if "flipped" is true the image will be flipped, the problem is that it will be flipped correctly, but only if the center is enabled, if it isn't the coords of the image will be messed up and go out of the canvas where it cannot be seen.

---- CODE ----

draw()
{
    this.global.ctx.save();
    
    this.global.ctx.translate(this.getX() + this.getWidth()/2, this.getY() + this.getHeight()/2);
    
    if(this.#flipped)
    {
        this.global.ctx.scale(-1, 1);
    }
    else
    {
        this.global.ctx.scale(1, 1);
    }
    
    this.global.ctx.rotate((this.angle * Math.PI) / 180);
    //this.ctx.fillRect(-this.getWidth()/2, -this.getHeight()/2, this.getWidth(), this.getHeight()); //! DRAW HITBOX
    if(this.#centerEnabled)
    {
        this.global.ctx.drawImage(this.#image, -this.getWidth()/2 , -this.getHeight()/2, this.getWidth(), this.getHeight());
    }
    else
    {
        this.global.ctx.drawImage(this.#image, this.getX(), this.getY(), this.getWidth(), this.getHeight());
    }

    this.global.ctx.restore();
}

If it's necessary these are the functions that the contex uses to draw the image to get the real X, Y, Width, Height of the image (because everything is responsive but you can treat it like a normal get):

-- getX() --

getX()
{
    if(this.#centerEnabled)
    {
        return this.global.getSize(this.x,"vw") - (this.getWidth()/2);
    }
    else{
        return this.global.getSize(this.x,"vw");
    }
}

-- getY() --

getY()
{
    if(this.#centerEnabled)
    {
        return this.global.getSize(this.y,"vh") - (this.getHeight()/2);
    }
    else{
        return this.global.getSize(this.y,"vh");
    }
}

-- getWidth() --

getWidth()
{
    return (((this.global.getSize(this.size,this.#resizeRule) * this.#ratio) / 100.0) * this.#scaleX).toFixed(3);
}

-- getHeight() --

getHeight()
{
    return ((this.global.getSize(this.size,this.#resizeRule) / 100.0) * this.#scaleY).toFixed(3);
}

Thanks in advance.

At the end I figured out how to do this properly, in the updated code I managed to flipped the image and also maintained the vertex of where the image is being drawn (top-left)

draw()
{
    this.global.ctx.save();
    
    if(this.#centerEnabled) 
    {
        this.global.ctx.translate(this.getX() + (this.getWidth() / 2), this.getY() + (this.getHeight() / 2));
    } 
    else 
    {
        this.global.ctx.translate(this.getX(), this.getY());
    }
    
    if(this.#flipped)
    {
        this.global.ctx.scale(-1, 1);
    }
    else
    {
        this.global.ctx.scale(1, 1);
    }
    
    this.global.ctx.rotate((this.angle * Math.PI) / 180);
    //this.ctx.fillRect(-this.getWidth()/2, -this.getHeight()/2, this.getWidth(), this.getHeight()); //! DRAW HITBOX
    if (this.#centerEnabled) 
    {
        this.global.ctx.drawImage(this.#image, -this.getWidth() / 2, -this.getHeight() / 2, this.getWidth(), this.getHeight());
    } 
    else 
    {
        if(this.#flipped)
        {
            this.global.ctx.drawImage(this.#image, -this.getWidth(), 0, this.getWidth(), this.getHeight()); //? Maintain the vertex of the image to top-left when it's flipped [Matteo]
        }
        else
        {
            this.global.ctx.drawImage(this.#image, 0, 0, this.getWidth(), this.getHeight());
        }
    }

    this.global.ctx.restore();
}