画布覆盖在一页上放大两次后消失

Question

所以我遇到了一个奇怪的错误，我不知道如何修复。当我点击我网站上一个名为"放大"的按钮时，它会启动一个覆盖层，里面有一个加载蛋白质结构的画布。但当我点击关闭按钮并再次尝试放大它时，它什么都没有加载，我似乎不明白为什么。

示例HTML

<!-- Expanded Canvas-->
                    <div id= "myNav" class ="overlay">
                            <a href="javascript:void[0]" class = "closebtn" onClick="closeNav()">X</a>
                            <div class = "overlay-content">
                                <div class = "fixed">
                                </div>
                                <div id = "viewer2">
                                        <canvas id = "expandedCanvas"></canvas>     
                                </div>
                    </div>  
                </div>
            </div>
<a  id = "expandImage" style = "cursor:pointer">[Enlarge]</a>
<script>
    function closeNav() {
        document.getElementById("myNav").style.width = "0%";    
        document.getElementById("sequence-label").style.display = "none";
        document.getElementById("picked-atom-name").style.display = "none";
        document.getElementById("proteinAlbum").style.display = "none";
    }
</script>

JS

function expandImage() {
expandImageButton = true;
    //Start off as default for both the buttons not showing 
show("antibodyOn", false);
show("antibodyOff", false);
//Reset the width 
document.getElementById("myNav").style.width = "100%";
viewer.requestRedraw();
viewer = pv.Viewer(document.getElementById('viewer2'), { 
    antialias : true, fog : true,
    outline : true, quality : 'high', style : 'phong',
    selectionColor : 'white', transparency : 'screendoor', 
    background : '#111215', animateTime: 500, doubleClick : null,
});
//Fit to the nav bar
viewer.fitParent();
this.value = "";
this.blur();
// Same principle as the loadFromPdb
var XHR = new XMLHttpRequest();
XHR.open("GET", urlPdb, true);
XHR.send();
XHR.onreadystatechange = function () {
    if (XHR.readyState === 4) {
        if (XHR.status === 200 || XHR.status === 0) {
         staticProteinLabel = XHR.responseText.slice(0, XHR.responseText.indexOf("n")).substr(62, 4).trim();
         var canvasStaticLabel = document.getElementById('static-label');
         canvasStaticLabel.textContent = staticProteinLabel;
         typeOfProtein = XHR.responseText.slice(0, XHR.responseText.indexOf("n")).substr(10, 26).trim();
         var result = XHR.responseText;
         var allLines = result.split("n");
         var lineTwo = String(allLines[1]);
         alert(lineTwo);
         var antibodyText = "ANTIBODY";
            if (typeOfProtein === "COMPLEX (ANTIBODY-ANTIGEN)") {
                isAntibody = true;
                anitbodyOn();
                }
            else if (lineTwo.indexOf(antibodyText) ) {
                isAntibody = true;
                antibodyOn();
            }
          }
        }
    }
io.fetchPdb(urlPdb, function(s) {
  structure = s;
  mol.assignHelixSheet(structure);
  cartoon();
  viewer.autoZoom();
  });
}

所以我想知道这是否只是宽度变化的问题，它无法再次加载查看器，以及如何解决它？

Answer 1

所以我能够弄清楚。画布内的数据需要销毁，所以我写了一个小函数来擦除数据并清除画布，这样它就可以再次重新加载。