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

  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – anon
    Commented Nov 6, 2015 at 12:07

2 Answers 2


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:

function load(a){


<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

To un-render the loading bar use:


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;

window.onload = function() {
	/* Fill Rectangle*/
	ctx.fillStyle = "#FF0000";
  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;

	/* Fill Rectangle*/
	ctx.fillStyle = "#FF0000";

	if (hatched <= 0) {
		hatched = 0;
<!DOCTYPE html>
	<title>Progress bar example</title>
<!-- 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>

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

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

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


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .