Object moving moving on zoom

[JElimpus]

I have a problem when using this overlay system on my map
I use a image map then use the fabric.js to add a rectangle to this map just like the example shows and when i do it on its own document it works fine. but when i use it on my webpage application it has a weird scaling bug when i use the openseadragons zoom function the object moves by itself like its not linked together with the actual canvas

Working Code on a html file

        App = {
            // ----------
            init: function () {
                var self = this;
                var maptoload = "{'type':'image','url':'../Maps/Substations/Aldwarke 275.jpg','width':2495,'height':1873}";
                eval('var maptoload=' + maptoload);
                this.viewer = OpenSeadragon({
                    id: "contentDiv",
                    prefixUrl: "openseadragon/images/",
                    tileSources: maptoload
                });
                // initialize overlay
                var options = {
                    scale: 1000
                }
                var overlay = this.viewer.fabricjsOverlay(options);
                // add fabric rectangle
                var rect = new fabric.Rect({
                    left: 0,
                    top: 0,
                    fill: 'red',
                    width: 200,
                    height: 200
                });
                overlay.fabricCanvas().add(rect);
                // add fabric circle
              
                $(window).resize(function () {
                    overlay.resize();
                    overlay.resizecanvas();
                });
            }
        };
        // ----------
        $(document).ready(function () {
            App.init();
        });

None working ajax aspx function code.

        function LoadSuccess(response) {
            Element.prototype.remove = function () {
                this.parentElement.removeChild(this);
            }
            NodeList.prototype.remove = HTMLCollection.prototype.remove = function () {
                for (var i = this.length - 1; i >= 0; i--) {
                    if (this[i] && this[i].parentElement) {
                        this[i].parentElement.removeChild(this[i]);
                    }
                }
            }
            mydata = response.d;
            maptoload = mapplusval[0];
            document.getElementsByClassName("openseadragon-container").remove();
            eval('var maptoload=' + maptoload);

           
            viewer2 = OpenSeadragon({
                id: "map",
                zoomInButton: "zoom-in",
                zoomOutButton: "zoom-out",
                homeButton: "home",
                fullPageButton: "full-page",
                nextButton: "next",
                previousButton: "previous",
                prefixUrl: "js/images/",
                tileSources: maptoload
            });
            viewer2.addHandler('canvas-nonprimary-press', function (event) {
                if (event.button === 2) {
                    viewer2.viewport.goHome();
                }
            });
                var options = {
                    scale: 1000
                }
                var overlay = viewer2.fabricjsOverlay(options);
                // add fabric rectangle
                var rect = new fabric.Rect({
                    left: 0,
                    top: 0,
                    fill: 'red',
                    width: 200,
                    height: 200
                });
                overlay.fabricCanvas().add(rect);
           $(window).resize(function () {
                overlay.resize();
                overlay.resizecanvas();
            });
            console.log(mydata);
            
        }

I am really scratching my head at this because it works on the html page but doesnt work on the aspx page. I am not sure if this is something to do with the fact i am using AJAX to recieve the maps data.

It does load the page and then it places the fabric object on but it is like they are not linked because the object moves around the page.

Thanks

[JElimpus]

Code resolved I have managed to fix this problem by reinitializing the canvas whenever a new tileset has been added.

        function loadmap(cid) {
        $.ajax({
            type: "POST",
            url: "/Webservices/MyAJA.asmx",
            data: "{equipmentId: '" + cid + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: LoadSuccess,
            failure: function (response) {
                alert(response.d);
            }
            });
        }

        function LoadSuccess(response) {
            
            mydata = response.d;
            mapplusval = mydata.split("%ptom");
            maptoload = mapplusval[0];
           
            eval('var maptoload=' + maptoload);   
            pTom = mapplusval[1];
            Element.prototype.remove = function () {
                this.parentElement.removeChild(this);
            }
            NodeList.prototype.remove = HTMLCollection.prototype.remove = function () {
                for (var i = this.length - 1; i >= 0; i--) {
                    if (this[i] && this[i].parentElement) {
                        this[i].parentElement.removeChild(this[i]);
                    }
                }
            }
            document.getElementsByClassName("openseadragon-container").remove();
            App.init();
        }
        function maploader() {
        App = {
            // ----------

            init: function () {
                var self = this;
                eval('var maptoload=' + maptoload);
                this.viewer = OpenSeadragon({
                    id: "contentDiv",
                    prefixUrl: "openseadragon/images/",
                    tileSources: maptoload
                });
                // initialize overlay
                var options = {
                    scale: 1000
                }
                var overlay = this.viewer.fabricjsOverlay(options);
                // add fabric rectangle
                var rect = new fabric.Rect({
                    left: 0,
                    top: 0,
                    fill: 'red',
                    width: 200,
                    height: 200
                });
                overlay.fabricCanvas().add(rect);
                // add fabric circle

                $(window).resize(function () {
                    overlay.resize();
                    overlay.resizecanvas();
                });
            }
            };
        }

Works pretty well although im having some problems with performance and fabric on this form of tileset. Any idea why the performance is poorer when doing this. It should run clean but as for now i have solved my own problem !.