When comparing EaselJS performance with Canvas native methods, I noticed a significant difference: 2.2 s vs 0.01 s (despite EaselJS mapping canvas native methods).
I created a canvas application that draws a tree*. For animating the growth of the tree, using EasalJS to tween a graphics object seemed like a cleaner and more convenient approach than writing a custom drawing function. *(actually resembling more of a virginia creeper)
1) The performance issues with EaselJS seem quite bad and I must have made some mistake in my implementation.
The crucial part of the code :
var g=new createjs.Graphics();
g.bs(branchTexture);
for (var i=0; i < arbre.length; i++) {
var step=arbre[i];
for (var t=0; t < step.length; t++){
var d=step[t];
var c=d[5];
var s=new createjs.Shape(g);
s.graphics.setStrokeStyle(7*(Math.pow(.65,d[7]-1)),'round').mt(c[0],c[1]).qt(c[2],c[3],c[4],c[5]);
}
mainStage.addChild(s);
}
}
mainStage.update();
A comparison can be viewed on this jsfiddle link : http://jsfiddle.net/xxsL683x/29/
Despite attempts at removing texture and simplifying moveTo() operations, the performance is still slow. Caching does not help as it's the initial rendering pass. Any insights on what could be done differently?
2) Looking for a way to orient the filling pattern in the growth direction, I am considering getting rid of vector shapes and interpolating bitmaps between two "growth states". Open to better suggestions if anyone has one.
(While answers to the first question are welcome, I'm also puzzled by the lack of antialiasing with EaselJS. Any thoughts on this issue would be appreciated.)
3) Another reason for considering moving away from EaselJS is the absence of antialiasing. Why is that? Needs further investigation...
Hoping this question benefits others by avoiding similar errors or enhancing understanding of how EaselJS deals with vector shapes.
PS : Yes, the tree has leaves ;) ...but they are excluded for clarity reasons.