Destroying Canvas

Question

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.

Spinode

Answer 1

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

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

Nam

Answer 2

You can use the canvas.clear() function.

Callaway

Answer 3

very late to the question but I just found this article which could work for you. Here's the just of it:

var _Canvas = null;
[...]
$('#canvasid').hide();
if (_Canvas)
    _Canvas.clear();
_Canvas = null;
$('#canvasid').siblings('.upper-canvas').remove();
$('#canvasid').parent('.canvas-container').before($('#canvasid'));
$('.canvas-container').remove();

Holloman