title: Canvas not rotating after calling setTransform
body: <p>I have an HTML5 canvas in which I'm drawing a line and rotating it around the center. I would like to reset the canvas's transformation each time I draw and then re-translate/rotate the canvas, but it doesn't seem to rotate. I have a working example in which I store the previous rotation and only rotate by the difference in angle (obviously, in this example I don't reset the transformation) but in the unsanitized version of this code it doesn't provide an adequate workaround.</p>
  
  <p>I've created two fiddles, <a href="https://jsfiddle.net/davemcclelland/d6ww5gqw/" rel="nofollow">the first version</a> in which I reset the transform and it doesn't function properly and <a href="https://jsfiddle.net/davemcclelland/0rsx3rep/" rel="nofollow">the second version</a> in which I store the difference in angles and it functions properly. Snippets copied below. <strong>How can I adapt the second version to function the same way that as the first?</strong></p>
  
  <h1>First version (functional, undesired implementation)</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {    
      // dynamic canvas
      var dynamic = document.getElementById("dynamic");
      var dynamicCtx = dynamic.getContext("2d");
      
      // animation status
      var FPS = 10;
      var INTERVAL = 1000 / FPS;
      
      dynamicCtx.translate(dynamic.width/2, dynamic.width/2);
      var previousRotation_rad = 0;
      var rotationCounter_deg = 0;
  
      var myDynamicObject = {
        center: dynamic.width / 2,
          length: dynamic.width * 0.4,
          draw: function () {   // example of dynamic animation code
            dynamicCtx.clearRect(-this.center, -this.center, 2*this.center, 2*this.center);
              
              // draw the current rotation angle
              dynamicCtx.textBaseline = 'middle';
              dynamicCtx.textAlign = 'center';
              dynamicCtx.fillText(rotationCounter_deg + '°', 0, -this.length);
              
              // draw a line from the center up
              dynamicCtx.beginPath();
              dynamicCtx.moveTo(0, 0);
              dynamicCtx.lineTo(0, -this.length + 20);
              dynamicCtx.stroke();
              
              // rotate the canvas
              var currentRotation_rad = rotationCounter_deg * Math.PI / 180;
              var rotationDifference_rad = currentRotation_rad - previousRotation_rad;
              previousRotation_rad = currentRotation_rad;
              console.log('rotating', rotationDifference_rad, 'radians');
              dynamicCtx.rotate(rotationDifference_rad);
             ++rotationCounter_deg;
          }
      };
  
      function drawDynamic() {        
          myDynamicObject.draw();
          // you can add more dynamic objects and draw here
      }
  
      function animate() {
          setInterval(function () {
              // only need to redraw dynamic objects
              drawDynamic();
          }, INTERVAL);
      }
  
      animate(); // entry point for animated (dynamic) objects
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#canvasesdiv {
      position:relative;
      width:400px;
      height:400px;
  }
  #dynamic {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="canvasesdiv"&gt;
      &lt;canvas id="dynamic" width=400 height=400&gt;This text is displayed if your browser does not support HTML5 Canvas&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>Second version (non-functional, desired implementation)</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {    
      // dynamic canvas
      var dynamic = document.getElementById("dynamic");
      var dynamicCtx = dynamic.getContext("2d");
      
      // animation status
      var FPS = 10;
      var INTERVAL = 1000 / FPS;
      
      var rotationCounter_deg = 0;
  
      var myDynamicObject = {
        center: dynamic.width / 2,
          length: dynamic.width * 0.4,
          draw: function () {   // example of dynamic animation code
            dynamicCtx.setTransform(1, 0, 0, 1, 0, 0);
          dynamicCtx.translate(dynamic.width/2, dynamic.width/2);
            dynamicCtx.clearRect(-this.center, -this.center, 2*this.center, 2*this.center);
              
              // draw the current rotation angle
              dynamicCtx.textBaseline = 'middle';
              dynamicCtx.textAlign = 'center';
              dynamicCtx.fillText(rotationCounter_deg + '°', 0, -this.length);
              
              // draw a line from the center up
              dynamicCtx.beginPath();
              dynamicCtx.moveTo(0, 0);
              dynamicCtx.lineTo(0, -this.length + 20);
              dynamicCtx.stroke();
              
              // rotate the canvas
              var currentRotation_rad = rotationCounter_deg * Math.PI / 180;
              console.log('rotating', currentRotation_rad, 'radians');
              dynamicCtx.rotate(currentRotation_rad);
             ++rotationCounter_deg;
          }
      };
  
      function drawDynamic() {        
          myDynamicObject.draw();
          // you can add more dynamic objects and draw here
      }
  
      function animate() {
          setInterval(function () {
              // only need to redraw dynamic objects
              drawDynamic();
          }, INTERVAL);
      }
  
      animate(); // entry point for animated (dynamic) objects
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#canvasesdiv {
      position:relative;
      width:400px;
      height:400px;
  }
  #dynamic {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="canvasesdiv"&gt;
      &lt;canvas id="dynamic" width=400 height=400&gt;This text is displayed if your browser does not support HTML5 Canvas&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>