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

Injunction

sorry for the confusion! I'll work on beefing up the KineticJS docs – Friarbird

@EricRowell it would be awesome if you could add a .removeAll function! – Latini

@EricRowell nevermind, found removeChildren() – Latini

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

Vizierate

This helps, thanks. The documentation is rather vague I'm quite used to reading API Docs, but this I find difficult to decipher. – Injunction

@Vizierate The documentation is atrocious. I find the only useful is the tutorial section, but if that doesn't answer your question(s), you are out of luck – Daub

update on KineticJS - you can now remove nodes like this: circle.remove(). Parent container is no longer needed for node removal – Friarbird

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.

Latini

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

    });

:-)

Bloater