Removing objects from a layer using KineticJS

javascript html5-canvas kineticjs
user1724623 picture user1724623 · Oct 6, 2012 · Viewed 14.4k times · Source

I am currently working a project involving KineticJS.

I have to dynamically create and delete shapes constantly, but cannot seem to figure out how to do the latter. I've been trying to do:

 $ myLayer.remove(myShape)

because this is what most posts seem to recommend. But, the documentation says that this will remove the layer from the stage and not the shape from the layer. When I try this in project it in fact removes the layer from the stage.

So am I doing something wrong or is there some other way to remove a shape from a layer?

Answer

BenMQ picture BenMQ · Dec 16, 2012

There are two functions that may be helpful.

  • childContainer.remove() removes the childContainer from it's parent.
  • parentContainer.removeChildren() removes all the children from this container.

Edit: This can also apply to shapes. Simply redraw the layer.

myShape.remove();
myLayer.draw();

Related questions

Convert HTML5 canvas to IMG element

I would like to resize, stretch an HTML5 canvas in a way that the canvas act like an IMG element: set width-height by pixel, percent... I wonder if is there any way to convert/export an HTML5 canvas to an …

Read More
How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Resize HTML5 canvas to fit window

How can I automatically scale the HTML5 <canvas> element to fit the page? For example, I can get a <div> to scale by setting the height and width properties to 100%, but a <canvas> won't …

Read More