jquerycanvasdraggablejcanvasclearcanvas

clearCanvas() with draggable layers


When I add normal objects or layers to the canvas (using jCanvas) I'm able to clear the canvas using the clearCanvas() function.

But when I make my layers draggable the clearCanvas() function does not seem to work. It does clear the canvas when I click the button, but as soon as the mouse hovers the canvas again the removed content gets added again. What am I doing wrong here?

JSFiddle Demo

$('canvas').drawArc({
    fillStyle: 'black',
    x: 100, y: 100,
    radius: 50,
    draggable: true, // uncomment this and Clear canvas works.
    layer: true,
});

$('#clear').click(function(){
    $('canvas').clearCanvas();
});

Solution

  • UPDATE by Mirko (here you are sir)

    Caleb Evans gave me the solution for my issue:

    The clearCanvas() method was only intended to be used with non-layer (static) drawings. Whenever you have at least one jCanvas layer for your canvas, clearCanvas() becomes inapplicable.

    if you wish to remove a layer completely (assuming you will never need it again), use the removeLayer() method.

    $('#clear').click(function(){
        $('canvas').removeLayers();
        $('canvas').drawLayers();
    });