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);

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

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


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?

• I feel like this would be better suited to StackOverflow, but I don't know enough about Create.js to say if a game dev would know more about it. – Fund Monica's Lawsuit Nov 6 '15 at 12:07

I am not familiar with create.js, if I wanted to create a loading bar I would use regular JS, with a canvas or CSS and html. You may want to use:

lC=document.getElementById("load");
lCC=lC.getContext("2d");
lCBackground="rgba(0,0,0,0)";
lCForeground="red";
lCC.fillStyle=lCForeground;
lCC.fillRect(0,0,lC.width*a,lC.height);
lCC.fillStyle=lCBackground;
lCC.fillRect(lC.width*a,0,lC.width-lC.width*a,lC.height);
}


With

<canvas id="load" width="1920" height="5"></canvas>


Just call load with the percentage as a decimal (.50=50%)

You can use any CSS Color

lCC.clearRect(0,0,lC.width,lC.height);


And will rerender when you call load again.

Note: you can change the color of the loading bar at anytime during the program, and this supports stuff like gradients and images

Try using this. It draw a bar, fill it up, and then drain it. (You will probably have to change some things so that it works with easeljs):

/* Get the canvas element */
var c = document.getElementById('canvas');

/* Get the canvas' context */
var ctx = c.getContext('2d');

/* Variables used for bar fill */
var total = 100,
hatched = 100;

/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,c.width,c.height);
var id = setInterval(dec,700);
}

function inc () {
hatched = 100;
}

function dec () {
hatched -= 4;
/* Perc (or percentage) takes the answer from hatched/total... */
var perc = hatched / total;
/* ... and filled takes perc and multiplies it by canvas.width (700px in this case) */
var filled = perc * c.width;

ctx.clearRect(0,0,c.width,c.height);

/* Fill Rectangle*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,filled,c.height);

if (hatched <= 0) {
hatched = 0;
}
}
<!DOCTYPE html>
<html>
<title>Progress bar example</title>
<body>
<!-- Use Canvas to draw bar. -->
<canvas id="canvas" width="1920px" height="5px" style="border: 2px solid black">
<p>Your computer doesn't support the canvas tag</p>
</canvas><br>
<br>

<!-- Buttons to increase and decrease values -->
<button type="button" onclick="inc();">Fill Up</button>

<script type="text/javascript" src="test.js"></script>
</body>
</html>

Hopefully this helps. I think using requestAnimationFrame would actually be much more useful.