How to clear canvas?

[John Dave Decano]

I am using reactJS. I was wondering how to properly clear the caman canvas so that i can draw new image. I was able to clear it using the native canvas function however when i try to load and edit a new drawn image, the old image appears.

[John Dave Decano]

https://github.com/johndavedecano/ReactJS-Redux-CamanJS-Image-Manipulation

[Aaron Buchanan]

Same issue, any luck resolving this @johndavedecano?

[Julian Renard]

Same for me 👍

[John Dave Decano]

none yet

[Ashwin A]

I am working on a similar application. Basically create a canvas at runtime, do your editing, delete the canvas and recreate it.

$('#template-container').append("<canvas id='image-edit'></canvas>");
Caman("#image-edit", $(".selected > img").attr("data-src"), function() {
        this.brightness(ui.value);
        this.render(function() {
              $(".selected > img").attr("src", this.toBase64());
              $('#image-edit').remove();
        });
});

I hope that helps someone.

[Alexandre Pinto]

I'm having the same problem.
But delete canvas and create a new one is not a possibility since i need to use a lot of images and the browser eventually crashes. This happens because Garbage Collector don't delete the detached objects.

So, anyone solved this issue without recreating a new canvas?

[irsl]

@AshwinTayson: that approach is leaking memory

[irsl]

The following dirty hack seems to free up memory finally:

                        camanObject.pixelData = null;
                        camanObject.initializedPixelData = null;
                        camanObject.originalPixelData = null;
                        camanObject.imageData = null;
                        camanObject.renderer.modPixelData = null;