Background scale, keep position of drawn element in canvas

Question

I use a system that combine a div background image and a canvas. This system let me appear the background like there is a light like this:

I permit to the user to zoom in/out the background. But i need to keep every drawn element positions. Today i have this:

After zoom in:

The wall height and width are correctly resize but its position move with the scale.

For the code i have this for the background:

document.getElementById("background").style.transform = "translate("+backgroundTransform.x+"px,"+backgroundTransform.y+"px) scale("+backgroundTransform.zoom+","+backgroundTransform.zoom+")";

And this for the drawn element:

        this.x = function(x){ 
        if(x != undefined)
            this.position.x = x;

        return this.position.x + backgroundTransform.x;
    },
    this.y = function(y){ 
        if(y != undefined)
            this.position.y = y;
        return this.position.y + backgroundTransform.y;
    },
    this.width = function() {return this.baseWidth * this.globalZoom()};
    this.height = function() {return this.baseHeight * this.globalZoom()};

If you need any informations please let me know.

Thanks.

Answer 1

I switch the div background with a canvas background. Now they can scale at the same time.