# JavaScript canvas animation slowing down and hogging memory

I'm experimenting with moving shapes in JavaScript with a canvas tag.

I have one half circle (only stroked) which rotates on set intervals.

I've written the code so many more can be added. I can give starting rotations and a lot of other handy parameters.

I've tried this with twelve circles and it looks exactly like I want. Problem is, the animation slows down and the framerate goes down quite fast. And it uses heaps and heaps of memory. Any ideas on how to optimize this code to not consume so much?

JS code:

var kin;
var canvas;
var context;
var pi = Math.PI;
var linearSpeed = 0.5*pi; // pixels / second
var linearDistEachFrame;
var myCircle;

function Circle(x, y, rot, radius, borderWidth, strokestyle){
this.x = x;this.y = y;
this.borderWidth = borderWidth;
this.rot = rot
this.goalrot = rot;
this.strokestyle = strokestyle;
}

function randomizeThis(object){
object.goalrot += pi;
}

function updateCircle(object){
if(object.goalrot > object.rot){ //if goal rotation is bigger than current rotation
object.rot += linearDistEachFrame;
}else{ // if goal rotation is equal or smaller than current
if(object.goalrot >= 2* pi){object.goalrot -= 2* pi;}
object.rot = object.goalrot;
}
}

function drawCircle(object){
context.beginPath();
context.arc(object.x, object.y, object.radius, object.rot, object.rot+pi, false);
context.fillStyle = "none"; context.fill();
context.lineCap = "round";
context.lineWidth = object.borderWidth;
context.strokeStyle = object.strokestyle;context.stroke();
}

context.beginPath();
if(clip == true){context.clip();}
}

kin = new Kinetic_2d("canvas");
canvas = kin.getCanvas();
context = kin.getContext();

myCircle =         new Circle(421,320,1.0*pi,    153,    12,"#FAA61A");//FAA61A

kin.setDrawStage(function(){
//update
linearDistEachFrame = linearSpeed * kin.getTimeInterval() / 1000;
updateCircle(myCircle);

//clear
kin.clear();

//draw
context.save();
drawCirc(context,281,222,58,true);
drawCircle(myCircle);
context.restore();
});

kin.startAnimation();

setTimeout(function(){randomizeThis(myCircle);setInterval("randomizeThis(myCircle)",4000);clearTimeout(this);},6000);
};


Thanks for all help!

• You may be interested to know that your code performs differently between Firefox and Chrome. The statement context.fillStyle = "none"; should instead be context.fillStyle = "rgba(0,0,0,0)";. – Barbarrosa Jan 1 '13 at 5:40

There is no need to recalculate the linearDistEachFrame during each update. You may want to precompute 2 * Math.PI as well.