Understanding Canvas & KineticJS layer clearing

Question

I wondered if anyone could shed some light on the way in which layers are managed in Canvas and KineticJS. I'm struggling understand why when i clear(); a layer, then use the draw(); function on that layer again, it comes back with the shapes etc that I originally add to that layer.

for example:

http://jsfiddle.net/vPGbz/1/

I assumed clearing a layer completely removes it, and in order to redraw it i would have to set up new shapes and construct a new layer.

If anyone could explain this too me I would be very thankful.

Cheers, Caius

Answer 1

One has to be honest that this documentation is not be considered uber-verbose, but as you can see here: http://jsfiddle.net/vPGbz/2/ clear will only remove the drawn representation of a layer from the Stage object. What you are looking for is the remove method that is used to remove certain elements from the layer.

Like:

circleLayer.remove(circle);

Answer 2

For now, you could do layer.children = []; but I don't know if this will have any side effects that it shouldn't!

Edit: Don't do this. Instead, do this: layer.removeChildren() found at http://kineticjs.com/api-docs.php under Container.

Answer 3

I'm using Kinetics 4.3.1. I'm making two layers, so I can add and remove one of them with the checkbox,

you can check this link out: http://jsfiddle.net/lauraliparulo/uw25p/

Something like this:

checkBoxItem.addEventListener('click', function() {
        if (this.checked) {
            load();
            stage.add(layer2);
        }

        else if (!this.checked) {
            layer2.clear();
        }

    });

:-)