Destroying Canvas

canvas html5-canvas undo fabricjs redo
Ganesh2 picture Ganesh2 · Jun 3, 2013 · Viewed 7.4k times · Source

I'm trying to accomplish undo/redo. I'm using loadFromJSON(...) to re-build the canvas from the canvas states I've stored in an array. Basically, my idea is to destroy the existing canvas and re-construct canvas. Here is my code.

    // TODO: How to destroy existing canvas?

    canvas = new fabric.Canvas('canvas', {
        containerClass : 'myCanvasContainer',           
    });

    canvas.loadFromJSON(history[historyStep]);

This code adds another canvas on top of existing canvas. However, I need a way to destroy the canvas and to build brand new canvas from my JSON data (replacing old canvas with new one).

Please advise whether it's possible or any other options I have.

Answer

Hooman Askari picture Hooman Askari · Oct 31, 2016

I believe canvas.dispose() is what you are looking for.

Read more here: http://fabricjs.com/docs/fabric.StaticCanvas.html#dispose

Related questions

How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Resize image with javascript canvas (smoothly)

I'm trying to resize some images with canvas but I'm clueless on how to smoothen them. On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don't know if these are built into …

Read More
HTML5 Canvas background image

I'm trying to place a background image on the back of this canvas script I found. I know it's something to do with the context.fillstyle but not sure how to go about it. I'd like that line to read …

Read More