title: How to rotate only part of canvas in javascript?
body: <p>I've got a task to play a little with JavaScript canvas. I have to onclick rotate the blue block with the movie, and as you can see in the fiddle it works, but the problem is my name which is below the film - it shouldn't rotate but stay on its position at the bottom of canvas (before clicking it's where it should be).
  This is the fiddle (without the movie, but it shows the problem):
  <a href="https://jsfiddle.net/463h8se7/" rel="nofollow noreferrer">https://jsfiddle.net/463h8se7/</a></p>
  <p>And this is my JavaScript (it is also in the fiddle, but for clarity here too):</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 video;
  var canvas;
  var ctx;
  var click = 0;
  
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    printName();
    ctx.save();
    ctx.fillStyle = "#558899";
    ctx.fillRect(canvas.width / 4 - 5, canvas.height / 4 - 5, canvas.width / 2 + 10, canvas.height / 2 + 10);
    ctx.drawImage(video, canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
    requestAnimationFrame(animate);
  }
  
  function rotate() {
    if (click == 0) {
      click = 1;
      i = window.setInterval(function () {
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(2 * Math.PI / 180);
        ctx.translate(-canvas.width / 2, -canvas.height / 2);
      }, 20);
    } else {
      click = 0;
      window.clearInterval(i);
    }
  }
  
  function printName() {
    ctx.fillStyle = "black";
    ctx.font = "15px Arial";
    ctx.fillText("aceimnors", canvas.width / 3, canvas.height - 1);
  }
  
  function load() {
    video = document.getElementById("video");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');
    animate();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div_canvas"&gt;
    &lt;canvas id="canvas" onclick="rotate()"&gt;&lt;/canvas&gt;
    &lt;p&gt;canvas&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>