javascript - HTML 5 Canvas rotate mulitple text items around circular point -

i'm trying display numbers around spokes of bicycle wheel. in process of creating 'spokes' wheel can't seem text rotate without messing rotation of wheel.

var arr = ['1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','1','2','3','4','5'];  function drawnumber() {     var cid = document.getelementbyid('cogs');     var canw = cid.width,         canh = cid.height;     if (cid && cid.getcontext){         var ctx = cid.getcontext('2d');         if(ctx) {                         ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);             var radian = (math.pi / 180) * 18;             var = 0             (var degrees = 0; degrees < 360; degrees += 18) {                 var fillnum = arr[i];                 ctx.font = "12pt arial"                 ctx.fillstyle = 'white';                 ctx.rotate(radian);                 rotatetext(fillnum);                 i++;             }             ctx.translate(-canw/2, -canh/2);         }     } }  function rotatetext(i){     var cid = document.getelementbyid('cogs');     ctx = cid.getcontext('2d');     ctx.filltext(i, -5, 150); }  drawnumber(); 

http://jsfiddle.net/rdo64wv1/8/

if add rotate rotate text function doesn't rotate text, moves around spokes further. ideas?

if understand correctly, want numbers continue along spoke direction @ 90°. mean bit unclear direction text continuing @ in first place. considering fiddle shows text continuing @ y-axis, here how draw text text result continuing @ x-axis instead (if not you're after, please include mock-up of result expect - adjust angle @ commented-out line needed).

think of process arm: shoulder rotated first, elbow, both @ pivot points, elbow relative shoulder angle.

so, first rotate @ center of wheel spoke angle. translate origin of text along spoke (x-axis in canvas 0° points right) "elbow" pivot point, or origin. rotate (if needed) , draw text, reset transformation , repeat next number.

here's updated example additional adjustments:

var arr = ['1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','1','2','3','4','5'];    function drawnumber() {      var cid = document.getelementbyid('cogs'),          cx = cid.width * 0.5,                     // we'll use center value          cy = cid.height * 0.5;          if (cid && cid.getcontext){          var ctx = cid.getcontext('2d');          if(ctx) {                          ctx.font = "12pt arial"               // set font once..              ctx.textalign = "center";             // align center don't              ctx.textbaseline = "middle";          //  need calculate center..              var step = math.pi * 2 / arr.length;  // step based on array length (2xpi=360°)              (var angle = 0, = 0; angle < math.pi * 2; angle += step) {                  ctx.settransform(1,0,0,1,cx, cy); // hard reset transforms + translate                  ctx.rotate(angle);                // absolute rotate wheel center                  ctx.translate(cx - 10, 0);        // translate along x axis                  //ctx.rotate(-math.pi*0.5);       // 90°, if needed...                  ctx.filltext(arr[i++], 0, 0);     // draw @ new origin              }          }      }      ctx.settransform(1,0,0,1,0,0);                // reset transforms  }    drawnumber();

<canvas id='cogs' width='300' height='300'></canvas>