create.js CPU high load

[PiraTa]

I'm new in Create.js and I'm trying to make countdown progress bar.

I have this simple code:

var stage = new createjs.Stage("timerCanvas");


stage.canvas.width = document.getElementById('timerProgress').offsetWidth;

stage.canvas.height = document.getElementById('timerProgress').offsetHeight;


var square = new createjs.Shape();

square.graphics.beginFill('red').drawRect(0, 0, stage.canvas.width, stage.canvas.height);



stage.addChild(square);



createjs.Tween.get(square, { loop: false }).to({ scaleX: 0 }, 90000);


createjs.Ticker.timingMode = createjs.Ticker.RAF;

createjs.Ticker.addEventListener("tick", stage);

My canvas width is 1920px and height 5px. My CPU average load is 20%, when this script runs...

I think it is high load, for such simple script. Am I right? If I am, What I'm doing wrong? How can I make optimization?

[mmcs]

If I'm right the tween interpolates the scaleX of the square for 9 seconds.

 

The CPU is spending is time on stage.update painting the whole stage 1920 X 5 at each tick.

1. createjs.Ticker.addEventListener("tick", stage);

 

1 - Option:

 

Depending on your requirements you could increase the delta time you do the stage.update using:

var handler = setInterval(function(){stage.update();}, 1000); (update / second)

 

and remove the handler when not needed.

2 - Option:

 

Reduce canvas width at the same time you tween the square, in teory you are reducing the painting area, and reducing the cost over time for the stage.update();

[b10b]

caching square will help a little too

[PiraTa]

Thank you guys for answers.


I increase my stage's height from 5px to 100px and left my progress bar rectangle's height 5px.
Now CPU load is 5%.
It is strange... Now I'm re-drawing bigger stage, but performance is better.