CODEWITHSUNDEEP
canvaseaseljs
Ashley Coolman
Ashley Coolman

Reputation: 11585

Easeljs performance drop?

I've been playing with easeljs and I've found the performances starts to drop. In my example Chrome takes about 3s to get to this point, and Safari takes 25s, Firefox is all over the place.

Questions:

  1. am I doing something wrong?
  2. or is this the performance hit I should expect from easeljs?

Example To demonstrate the performance hit I am experiencing, I created a simple circle redraw animation on a loop, but the framerate quickly begins to drop. If I revert to pure canvas API calls then it regains the performance.

Below is the crucial snippet from my redraw that chooses the method to draw the circle:

if ( counter.fps > 60) {
    circle.graphics.beginFill('green')
    circle.graphics.drawCircle(0,0, w / 10)
    circle.graphics.endFill();
    stage.update();
} else {    
    context.beginPath();
    context.arc(circle.x, circle.y, w / 10, 0, 2 * Math.PI, false);
    context.fillStyle = "darkred";
    context.fill();
}

See this jsfiddle for a demo: http://jsfiddle.net/AshCoolman/5xYxM/9/

Variations I have tried with similar results:

(Rough) timeline of performance (OSX 10.8.2 on mid2012 macbook air)

Chrome v26.0.1410.43

Safari v6.0.2 (8536.26.17)

Firefox v20

Upvotes: 0

Views: 3188

Answers (1)

gskinner
gskinner

Reputation: 2488

EaselJS graphics are retained, so each frame you are adding another circle definition to Graphics queue. So, after 1000 "redraw" calls, it is drawing 1000 circles each time.

Use Graphics.clear() to reset the draw queue, or just draw the circle once & move the corresponding Shape (recommended).

Here's a modified version of your Fiddle, that gets a solid 99fps for me: http://jsfiddle.net/5xYxM/13/

Upvotes: 11

Related Questions