Question

Friends, i’m finding rotating a text canvas object a bit tricky. The thing is, I’m drawing a graphic, but sometimes the width of each bar is smaller than the ‘value’ of that bar. So I have to ratate the ‘value’ 90 degrees. It will work in most cases.

I am doing the following

a function(x, y, text, maxWidth...)
var context = this.element.getContext('2d');

var metric = context.measureText(text); //metric will receive the measures of the text

if(maxWidth != null){
    if(metric.width > maxWidth) context.rotate(Math.PI / 2);
}
context.fillText(text, x, y);

Ok, but it doesn’t really work. Problems that I have seen: The text duplicates in different angles. The angles are not what I want (perhaps just a matter of trigonometry).

Well I just don’t know what to do. I read something about methods like ‘save’ and ‘restore’ but I don’t what to do with them. I’ve made some attempts but no one worked.

Would you help me with this, guys?

Answer 1

This is a bit tricky to answer simply because there are a lot of concepts going on, so I’ve made you an example of what I think you’d like to do here:

http://jsfiddle.net/5UKE3/

The main part of it is this. I’ve put in a lot of comments to explain whats going on:

function drawSomeText(x, y, text, maxWidth) {
    //metric will receive the measures of the text
    var metric = ctx.measureText(text); 
    console.log(metric.width);

    ctx.save(); // this will "save" the normal canvas to return to
    if(maxWidth != null && metric.width > maxWidth) {
        // These two methods will change EVERYTHING
        // drawn on the canvas from this point forward
        // Since we only want them to apply to this one fillText,
        // we use save and restore before and after

        // We want to find the center of the text (or whatever point you want) and rotate about it
        var tx = x + (metric.width/2);
        var ty = y + 5;

        // Translate to near the center to rotate about the center
        ctx.translate(tx,ty);
        // Then rotate...
        ctx.rotate(Math.PI / 2);
        // Then translate back to draw in the right place!
        ctx.translate(-tx,-ty);
    }
    ctx.fillText(text, x, y);
    ctx.restore(); // This will un-translate and un-rotate the canvas
}

To rotate around the right spot you have to translate to that spot, then rotate, then translate back.

Once you rotate the canvas the context is rotated forever, so in order to stop all your new drawing operations from rotating when you dont want them to, you have to use save and restore to “remember” the normal, unrotated context.

If anything else doesn’t make sense let me know. Have a good time making canvas apps!