title: HTML 5 Canvas. How to rotate (keep rotating) only one object (of >1)?
body: <p>I am trying to get a handle on rotating in canvas and I have not found an answer to my issue.</p>
  
  <p>One square is to remain still. Another square to rotate at a specified point. I can either get the entire canvas to rotate at that point, or neither at all. But I cannot get one square to be static and one to rotate.</p>
  
  <p>Please view my codepen demo here: <a href="http://codepen.io/richardk70/pen/EZWMXx" rel="nofollow noreferrer">http://codepen.io/richardk70/pen/EZWMXx</a></p>
  
  <p>The javascript:</p>
  
  <pre><code>HEIGHT = 400;
  WIDTH = 400;
  
  function draw(){
  
  var ctx = document.getElementById("canvas").getContext('2d');
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  
  // draw black square
  ctx.save();
  ctx.fillStyle = "black";
  ctx.beginPath();  
  ctx.fillRect(75,75,100,100);
  ctx.closePath();
  ctx.restore();
  
  // attempt to rotate small, maroon square only
  ctx.save();
  ctx.translate(225,225);
  
  // small maroon square
  ctx.fillStyle = "maroon";
  ctx.beginPath();
  ctx.fillRect(-25,-25,50,50);
  ctx.closePath();
  ctx.rotate(.1);
  ctx.translate(-225,-225);
  
  // comment out below line to spin
  // ctx.restore();
  
  window.requestAnimationFrame(draw);
  }
  
  window.requestAnimationFrame(draw);
  </code></pre>
  
  <p>I know I could do layered canvases, but surely it can be done in just one canvas layer? Isn't the clock in this tutorial (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations</a>) doing exactly that?</p>
  
  <p>Thanks for any and all help. </p>