Question

I am now entering Kinetic and it has made it far easier for me to draw on canvas. However, building a game app, I need to clear the rectangle on every animation request. They're controlled by an fps cap script, but still, there are about 50 updates per second.

Kinetic's .removeChildren() method not only clears the canvas, it deletes the canvas node from the DOM. Doing so not only makes DOM queries inconsistent by intervals of .02 second, but also drops my FPS rate by about 60% in comparison to stock HTML5 canvas handling on every machine I ran the game on.

Is there a KineticJS method for clearing the canvas in a manner such as clearRect()'s?

Edit:

I have also made sure it's not a problem on any other part of the program. Call stack doesn't overflow, the FPS drop is just due to DOM changing twice every .02 second.

Edit 2:

I have tried the following:

  • Ignore the layer before and create a blank rectangle to fill up the visible part of the canvas. It dropped my frame rate to about 14 FPS;
  • Use the .clear() method. It solved the DOM consistency problem but the frame rate got even lower than before.

It seems the only solution would be calling the default HTML5 clearRect() method, but that would mean creating the canvas element by hand (and possibly making Kinetic useless as a library for my app).

Edit 3:

As for the app, I've started using standard HTML5 canvas since I have a deadline. I'd still like to see a Kinetic solution though - it might be helpful in the future. It surprises me to see such a simple thing is so hard, if not impossible, in a popular library like KineticJS.

No correct solution

OTHER TIPS

You can use layer.clear with a bounding area to clear just the "dirty" part of your layer.

// tell layer not to auto-clear on layer.draw

layer.setClearBeforeDraw(false);

// clear the "dirty" portion of the canvas

layer.clear(100, 100, 150, 150);


// adjust some animation values and
// just draw the element that has changed

myRect.draw();

You should try to create new Layer for example:

var newLayer = new Kinetic.Layer();

Or call this function:

Canvas.clear();

Kinetic makes it very easy to draw using layers, groups and shapes.

If your view is properly make of these items you can easily remove them and they will be removed from the stage.

Perhaps you need to rewrite you code to make it work better in kinetic.

if you think your code is properly written you can try (as a workaround) to create kinetic rectangle and fill it with whatever you want to simulate a clear.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top