Jason Samuels Jason Samuels -4 years ago 202
Javascript Question

Rotate text in a canvas with javascript

In the following code i want to rotate the text of each element of the array in javascript. If i use for example

ctx.rotate(Math.PI/10)
before the filltext, it rotates all the elements. The positioning of the text also changes with
ctx.rotate(Math.PI/10)
and if i use 90 degrees,
ctx.rotate(Math.PI/2)
the text does not show on the canvas.

<html>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = new Array("Day1","Day2","Day3","Day4","Day5");

ctx.rotate(Math.PI/10);
for(var i = 0; i < x.length; i++){
ctx.fillText(x[i],i*50+20,50);
}


</script>
</html>


As i said, i want to rotate each element on its own and with that the positioning of each element should stay the same as in the non-rotated text as in the code above. Thus each element has to rotate around its own axis. How can i achieve this?

Answer Source

Have made some changes in your code, it should help:

<html>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid 

#d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = new Array("Day1","Day2","Day3","Day4","Day5");
       for(var i = 0; i < x.length; i++){
            var size = ctx.measureText(x[i]);
    ctx.save();
    var tx = (i*50+20) + (size.width/2);
    var ty = (50);
    ctx.translate(tx,ty);
    ctx.rotate(Math.PI / 10);
    ctx.translate(-tx,-ty);
            ctx.fillText(x[i],i*50+20,50);
    ctx.restore();
        }   
</script>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download