title: How to destroy / reload the canvas in html 5?
body: <p>I am working on an ebook application, I draw each page on canvas using PDF.js , the problem is , when I click on the button and turn to other page, I tried simply render on the same canvas again , but the canvas seems move to a wrong location or wrong size . </p>
  
  <pre><code>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);
              });
          });
      });
  }
  </code></pre>
  
  <p>So, are there any necessary step I need to do before redraw the page? Also , how can I destroy it if I would like to close the page? Thanks</p>
  
  <p>Update:</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>I found a function to clear the canvas but it has .save , .setTransform and .restore besides clearRect, are they necessary? thanks</p>