title: Rotate text in a canvas with javascript
body: <p>In the following code i want to rotate the text of each element of the array in javascript. If i use for example <code>ctx.rotate(Math.PI/10)</code> before the filltext, it rotates all the elements. The positioning of the text also changes with <code>ctx.rotate(Math.PI/10)</code> and if i use 90 degrees, <code>ctx.rotate(Math.PI/2)</code> the text does not show on the canvas.</p>
  
  <pre><code>&lt;html&gt;
  &lt;canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  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 &lt; x.length; i++){
              ctx.fillText(x[i],i*50+20,50);      
          }   
  
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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?</p>