HTML 5 Canvas rotate mulitple text items around circular point

Question

I'm trying to display numbers around the spokes of a bicycle wheel. In the process of creating the 'spokes' for the wheel I can't seem to get the text to rotate without messing up the rotation of the 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 i = 0
            for (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 I add a rotate to the rotate text function it doesn't rotate the text, it just moves around the spokes further. Any ideas?

Answer 1

If I understand you correctly, you want to numbers to continue along the spoke direction at 90°. What you mean exactly is a bit unclear as what direction is text continuing at in the first place. Considering that the fiddle shows the text continuing at the y-axis, here is how to draw text with the text result continuing at the x-axis instead (if this is not what you're after, please include a mock-up of what result you expect - just adjust the angle at the commented-out line as needed).

Think of the process as an arm: shoulder is rotated first, then the elbow, both at their pivot points, but elbow is always relative to shoulder angle.

So, first rotate at center of wheel to get the spoke angle. Then translate to the origin of the text along that spoke (x-axis in canvas as 0° points right) to get to the "elbow" pivot point, or origin. Rotate (if needed) and draw text, finally reset transformation and repeat for next number.

Here's an updated example with some 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 only use the center value
        cy = cID.height * 0.5;
  
    if (cID && cID.getContext){
        var ctx = cID.getContext('2d');
        if(ctx) {            
            ctx.font = "12pt Arial"               // set font only once..
            ctx.textAlign = "center";             // align to center so we don't
            ctx.textBaseline = "middle";          //  need to calculate center..
            var step = Math.PI * 2 / arr.length;  // step based on array length (2xPI=360°)
            for (var angle = 0, i = 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 at new origin
            }
        }
    }
    ctx.setTransform(1,0,0,1,0,0);                // reset all transforms
}

drawNumber();

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