Canvas not rotating after calling setTransform
<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>