How to destroy / reload the canvas in html 5?

问题:

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 .

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);             });         });     }); } 

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

Update:

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 } 

I found a function to clear the canvas but it has .save , .setTransform and .restore besides clearRect, are they necessary? thanks

回答1:

One way is to clear out the canvas using context.clearRect(0,0, width, height) (Reference).

Alternatively, you can append a new canvas element (and possibly remove the old one, depending on whether you will want to display it again) each time you want a new page. Something like this should do it:

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

Just note that if you plan to keep more than one, each one must have a unique id instead of just id="canvas" (perhaps based on the page number - something like canvas-1).

---

Answer to updated question:

The save, setTransform, and restore are only necessary if you are doing (or somehow allowing users to do) transformation. I don't know if the PDF.js library does any transformation behind the scenes, so it may be best to leave it there.

回答2:

try using clearRect(), like:

canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); 

文章来源: How to destroy / reload the canvas in html 5?