title: Rotate canvas arc on its centre
body: <p>I have a canvas with an arc and some labels inside it.</p>
  
  <p>Here is the fiddle link - <a href="https://jsfiddle.net/n2EYw/790/" rel="nofollow noreferrer">Fiddle</a> and below is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var canvas = document.getElementById("myCanvas"),
      ctx = canvas.getContext("2d"),
      x = canvas.width / 2,
      y = canvas.height / 2,
      radius = 100;
  
  ctx.lineWidth = 2;
  
  var numberofArcs = 10,
      sengmentWidth = 1.5 * Math.PI / numberofArcs,
      pieAngle = 1.5 * Math.PI / numberofArcs;
  
  console.log(pieAngle);
  
  var labeltext = '',
      font = 16,
      hightlight = 1;
  
  drawSegments(radius, font, hightlight);
  
  ctx.translate(x, y);
  ctx.rotate(135 * Math.PI);
  ctx.translate(-x, -y);
  
  function drawSegments(radius, font, highlight) {
      var offset = 0;
  
      for (var i = 0; i &lt; numberofArcs; i++) {
          (i&lt;=8) ? offset = 3 : offset = 8;
          
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(x, y);
  
          ctx.arc(x, y, radius, i * pieAngle, (i + 1) * pieAngle);
  
          var hueValue = i * 15;
  
          ctx.fillStyle = 'hsl(' + hueValue + ',70%, 60%)';
          ctx.fill();
          ctx.lineTo(x, y);
          ctx.lineWidth = 3;
          ctx.strokeStyle = '#f3f5f6';
          ctx.stroke();
  
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.arc(x, y, radius - 10, i * pieAngle, (i + 1) * pieAngle);
          ctx.fillStyle = '#f3f5f6';
          ctx.fill();
          ctx.lineTo(x, y);
          ctx.lineWidth = 0;
          labeltext = i + 1;
          ctx.font = '16px bold white';
  
          var width = ctx.measureText(labeltext).width;
          ctx.fillStyle = '#CCC';
  
          if ((i + 1) == highlight) {
              ctx.textBaseline = 'middle';
  
              console.log(offset);
  
              ctx.beginPath();
              ctx.moveTo(x + offset +(radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2));
              ctx.arc(x + offset + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), 10, 0,  2 * Math.PI);
              ctx.fillStyle = 'red';
              ctx.fill();
  
              ctx.fillStyle = "#000";
  
              ctx.fillText(labeltext, x + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2));
          } else {
              ctx.fillStyle = "black";
              ctx.fillText(labeltext, x + (radius + 30) * Math.cos(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2), y + (radius + 30) * Math.sin(i * pieAngle + ((i + 1) * pieAngle - i * pieAngle) / 2));
          }
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
      border: 1px dotted black;
      color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want to achieve is rotate the whole arc along with labels by 135 degrees.
  I tried this code but it did not work : </p>
  
  <pre><code>ctx.translate(x, y);
  ctx.rotate(135 * Math.PI/180);
  ctx.translate(-x, -y);
  </code></pre>
  
  <p>Where x and y are canvas center points.
  Any help would be appreciated.
  PS: I'm new to canvas !</p>