Javascript 如何在HTML5中销毁/重新加载画布？

我正在开发一个电子书应用程序，我使用PDF.js在画布上绘制每个页面，问题是，当我单击按钮并转到另一个页面时，我尝试再次在同一画布上渲染，但画布似乎移动到了错误的位置或错误的大小

function renderPage(url) {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      //clearCanvasGrid('canvas');

      PDFJS.getDocument(url).then(function (pdf) {
          // Using promise to fetch the page
          pdf.getPage(1).then(function(page) {
            var viewport = page.getViewport(5); //scale 5

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: ctx,
              viewport: viewport
            };

            page.render(renderContext).then(function() {
                initialZoomPage(viewport.height,viewport.width);
            });
        });
    });
}

那么，在重新绘制页面之前，是否需要执行任何必要的步骤？另外，如果我想关闭页面，我如何销毁它？谢谢

更新：

function clearCanvasGrid(canvasID){
    canvas = document.getElementById(canvasID); //because we are looping //each location has its own canvas ID
    context = canvas.getContext('2d');
    //context.beginPath();

    // Store the current transformation matrix
    context.save();

    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING
}

我找到了一个清除画布的函数，但是除了clearRect之外，它还有.save、.setTransform和.restore，它们是必需的吗？谢谢

尝试使用，如：

---

一种方法是使用清除画布

或者，您可以在每次需要新页面时附加一个新的画布元素（并可能删除旧的画布元素，具体取决于您是否希望再次显示该元素）。像这样的东西应该可以做到：

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);

请注意，如果您计划保留多个，则每一个都必须具有唯一的

id

，而不仅仅是

id=“canvas”

（可能基于页码-类似于

canvas-1

）

---

对更新问题的回答：

---

只有在进行（或以某种方式允许用户进行）转换时，才需要使用

保存

、

设置转换

和

恢复

。我不知道PDF.js库是否在幕后进行了任何转换，因此最好将其留在那里。

如果我使用“$（'#canvas'）.remove（）”删除画布，并将其附加$（'body'）.prepend（''）；，有什么问题吗？thanks@user782104是的，这应该做完全相同的事情。如果你删除画布，你不应该做

clearRect

，因为你正在摆脱整个东西。谢谢你的帮助，请看看更新的函数谢谢，看来重用和破坏只是简单地删除或附加它

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);