How can you get different objects working at different framerates working in html5 canvas?

Say I want a ball bouncing at 5 frames per second and only want to have a square bouncing at 2 frames per second, how is this possible?

return setInterval(draw,10) is used in the current simulation to move 1000 particles around, but I also want to draw a radial gradient on a second ca开发者_运维问答nvas which gets data from the particle simulation. I cant figure out how to draw the gradient a frame per second and the particles at another framerate

What i do is create a Timer constructor, and everytime I make something animate, i make a var animateThing = new Timer().

It may not be necessary to do this, but it can be a useful peice of code as you get deeper into canvas with more moving parts.

Update So something sorta like this.

function Timer(fps, callback) {
  return setTimout(callback, 1000 / fps);
}

var timer1 = new Timer(33, callback1);
var timer2 = new Timer(55, callback2);

Now that's probably not gonna work, but it's the idea.