0

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.

gchiconi
  • 624
  • 1
  • 7
  • 17
  • Tight deadline! You asked your question 2 hours ago and are already abandoning all hope. Hint about KineticJS: this libarary is changing rapidly and often with breaking changes--make sure you check out the change log as well as the docs ;) – markE Dec 03 '13 at 15:43

3 Answers3

1

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();
markE
  • 102,905
  • 11
  • 164
  • 176
  • Wouldn't that clear only the canvas, but keep the JavaScript objects? – gchiconi Dec 03 '13 at 16:17
  • 1
    Yes, that's the advantage. You can clear just the “dirty” portion of your layer, but not clear the entire canvas. The dirty portion is that part which must look different in the next animation frame. Clearing the dirty portion of a drawing surface is much faster than clearing/redrawing the whole canvas (this is really a very old graphics trick—the GPU also does this behind the scenes). Presumably your Kinetic node is visually erased during .clear, but it still exists. You can then move/hide that node to its new position and then call node.draw() to visually display just that node. – markE Dec 03 '13 at 16:34
  • Yes, since Atari times there is a sprites layer. In my program, exactly due to older use of no-lib HTML5 canvas, there are two different spaces in the page (superposed), and the foreground is drawn on start and only once. The canvas itself *is* just the to-be-altered layer. To make use of Kinetic in that way, it would take a near-full rebuild of the syste. – gchiconi Dec 03 '13 at 16:41
  • 1
    Fair enough--good luck with your project :) One note: Kinetic automatically clears the canvas when layer.draw is called--so you don't need to call clearRect manually. – markE Dec 03 '13 at 16:50
  • Well, thanks for the suggestion! I guess Kinetic is made to be used alone. You can't efficiently overlap it with default canvas functions and DOM methods. – gchiconi Dec 03 '13 at 16:56
  • 1
    Actually Kinetic does let you blend Kinetic objects with html canvas drawing. Check out Kinetic.Shape which give you a context object which you can use to execute standard html canvas context methods. I know you're on a tight deadline...But someday when you get a few moments, check out Kinetics abilities in more depth. Again, good luck with your project :) – markE Dec 03 '13 at 17:02
0

You should try to create new Layer for example:

var newLayer = new Kinetic.Layer();

Or call this function: 

Canvas.clear();
Ringo
  • 3,795
  • 3
  • 22
  • 37
  • It doesn't really solve my problem. I don't know exactly how Kinetic's layer system works, but for some reason either suggestion you gave me only slowed it down even more :/ – gchiconi Dec 03 '13 at 13:56
  • It depend on how you use it! – Ringo Dec 03 '13 at 13:58
-1

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.

Nir Cohen
  • 75
  • 7