canvas - Lienzo destructor

html5-canvas undo

Question

Gracias por el buen trabajo! Estoy tratando de lograr deshacer / rehacer. Estoy usando loadFromJSON (...) para volver a construir el lienzo desde los estados del lienzo que he almacenado en una matriz. Básicamente, mi idea es destruir el lienzo existente y volver a construir el lienzo. Aquí está mi código.

    // TODO: How to destroy existing canvas??

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

    canvas.loadFromJSON(history[historyStep]);      

Este código agrega otro lienzo sobre el lienzo existente. Sin embargo, necesito una forma de destruir el lienzo y crear un lienzo nuevo a partir de mis datos JSON (reemplazando el viejo lienzo por uno nuevo).

Por favor, avíseme si es posible o cualquier otra opción que tengo.

Gracias y saludos, Surya.

Answer 1

Puede usar la función canvas.clear ().

Answer 2

Prueba esto:

context.clearRect(0,0,canvas.width, canvas.height);

Answer 3

muy tarde a la pregunta, pero acabo de encontrar este artículo que podría funcionar para usted. Aquí está el justo:

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

Answer 4

Creo que canvas.dispose() es lo que estás buscando.

Lea más aquí: http://fabricjs.com/docs/fabric.StaticCanvas.html#dispose