How can I animate an object in orbit using HTML5 Canvas? -

lets i've drawn objects, sun in middle , couple of circles planets. can enlighten me how make these objects move around in circular fashion? don't need gravity etc suppose sweet bonus!

thanks :)

here's crude solution:

var canvas = document.getelementbyid('scene'); var ctx = canvas.getcontext('2d'); var w = canvas.width; var h = canvas.height;  var circle = function(color, r) {     ctx.fillstyle = color;      ctx.beginpath();     ctx.arc(0, 0, r, 0, 2 * math.pi, true);     ctx.closepath();      ctx.fill(); }  var = 0; var redraw = function() {     ctx.save();      // paint bg     ctx.fillstyle = 'black';     ctx.fillrect(0, 0, w, h);      // set origin center     ctx.translate(w / 2, h / 2);      // draw sun     circle('yellow', 20);      // rotate + move along x     ctx.rotate(i / 100);     ctx.translate(100, 0);      // draw planet     circle('green', 10);      ctx.restore();      i++;      window.requestanimationframe(redraw); };  window.requestanimationframe(redraw); 

you can find demo here. extend needed. :)