title: HTML5: Image rotating around pivot, wrong orientation
body: <p>I want to create an animation which is drawned on a following diagram on the left. It should visualize i.e. clouds spinning around sphere.</p>
  
  <p><img src="https://i.stack.imgur.com/u4Rag.png" alt="Wrong rotation around a pivot"></p>
  
  <p>I want the cloud A to spin around the pivot point X in some fixed radius (i.e. 100px). Of course, it is essention for the cloud to get properly oriented, otherwise it would look weird. I have achieved the effect of rotation around the pivot in the fixed distance, but my rectange was wrongly oriented (see the figure on the right).</p>
  
  <p>The code is following:</p>
  
  <pre><code>&lt;canvas id="cloudsCanvas" width="1050" height="300"&gt;&lt;/canvas&gt;
     &lt;script&gt;
          var cloudCenter = [400, 400];
  
          // pivot point coordinates
          var cx = 1050 / 2;
          var cy = 800;
          var deg = 45;
  
          var cloud1 = new Image;
  
  
          window.onload = function () {
              var cloudsCanvas = document.getElementById("cloudsCanvas");
              var cloudsContext = cloudsCanvas.getContext("2d");
  
              setInterval(function () {
                  cloudsContext.save();
                  cloudsContext.clearRect(0, 0, cloudsCanvas.width, cloudsCanvas.height);
  
                  deg += 1;
                  // Center the needle on the canvas.
                  cloudsContext.translate(cx, cy);
                  cloudsContext.rotate(deg * Math.PI / 180);
                  cloudsContext.drawImage(cloud1, cloudCenter[0], cloudCenter[1]);
  
                  cloudsContext.restore();
              }, 50);
  
          };
  
          cloud1.src = './img/cloud1.png';
   &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas how to fix this? Thank you!</p>