Question

Recently, I study HTML Canvas using Google Closure.

but the performance of Google Closure is terribly slow.

when I run my code.. it almost crash down Chrome browser.

Of course I did the same thing in HTML Canvas code not using Google Closure; It is super fast.

Here is my canvas code using Google Closure (goog.graphics.CanvasGraphics)

Since I am just a beginner in this module(goog.graphics.CanvasGraphics), I am not sure I did it correctly. Is there a something wrong I did?
Why is it so terribly slow??!!

It is too frustrating.

/** 
 * @param {Document} doct
 */
test.main = function(doct){
var dom = new goog.dom.DomHelper(doct);

/**
 * goog.graphics.CanvasGraphics(width, height, opt_coordWidth, opt_coordHeight, opt_domHelper)
 * @type {goog.graphics.CanvasGraphics} 
 */
var canvas = new goog.graphics.CanvasGraphics(500, 500, null, null, dom);
canvas.render(dom.getElement('canvasTest2'))
canvas.balls = [];






 function  drawScreen () {
    canvas.clear()

    for (var i =0; i <canvas.balls.length; i++) {
        ball = canvas.balls[i];
        ball.x += ball.xunits;
        ball.y += ball.yunits;
        var ellipse = canvas.drawEllipse(ball.x, ball.y, ball.radius, ball.radius, null, ball.solidFill);


        if (ball.x > canvas.width || ball.x < 0 ) {
            ball.angle = 180 - ball.angle;
            updateBall(ball);
        } else if (ball.y > canvas.height || ball.y < 0) {
            ball.angle = 360 - ball.angle;
            updateBall(ball); 
        }
    }

}

function updateBall(ball) {

    ball.radians = ball.angle * Math.PI/ 180;
    ball.xunits = Math.cos(ball.radians) * ball.speed;
    ball.yunits = Math.sin(ball.radians) * ball.speed;

}

var numBalls = 80;
var maxSize = 15;
var minSize = 5;
var maxSpeed = maxSize+5;

for (var i = 0; i < numBalls; i++) {

    var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
    var tempX = tempRadius*2 + (Math.floor(Math.random()*canvas.width)-tempRadius*2);
    var tempY = tempRadius*2 + (Math.floor(Math.random()*canvas.height)-tempRadius*2);
    var tempSpeed = maxSpeed-tempRadius;
    var tempAngle =  Math.floor(Math.random()*360);
    var tempRadians = tempAngle * Math.PI/ 180;
    var tempXunits = Math.cos(tempRadians) * tempSpeed;
    var tempYunits = Math.sin(tempRadians) * tempSpeed;

    var stroke = new goog.graphics.Stroke(3, '#333');
    var solidFill = new goog.graphics.SolidFill('#333');

    tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, stroke:stroke, solidFill:solidFill, angle:tempAngle, xunits:tempXunits, yunits:tempYunits}

    canvas.balls.push(tempBall);

}

setInterval(drawScreen, 32);    


}

Answer 1

Maybe very obvious but did you tried it using Advanced Compilation? This removes dead code and optimizes your code. See https://developers.google.com/closure/compiler/docs/api-tutorial3 It might make the performance acceptable…

Regards,

Rene