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.

score 18 · Answer 1 · edited Oct 31 '16 at 15:23

18

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

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

edited Oct 31 '16 at 15:23

Blue

22,608
7
62
92

answered Oct 31 '16 at 15:22

Hooman Askari

1,486
16
30

score 1 · Answer 2 · answered Jun 03 '13 at 10:37

1

You can use the canvas.clear() function.

answered Jun 03 '13 at 10:37

rodrigopandini

945
1
7
18

score 0 · Answer 3 · answered Aug 04 '16 at 13:06

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

Destroying Canvas

3 Answers3