title: JavaScript Canvas - rectangle spin around circle
body: <p>I'm trying to make a rectangle to spin around a circle and to spin around itself. My brilliant drawing will show what i mean :) </p>
  
  <p><img src="https://i.stack.imgur.com/KLf1W.png" alt="enter image description here"></p>
  
  <p>I made a spinning rectangle around the circle but I can't make to spin rectangle around itself. Can someone help me? My code:</p>
  
  <pre><code>var game = {
  
          canvas: document.getElementById('mycanvas'),
  
          ctx: document.getElementById('mycanvas').getContext('2d'), 
  
          char: {
              x: 100,
              y: 100,
              w: 50,
              h: 50,
              inc: 0
          },
  
          init: function() {
              game.drawAll();
  
          },
  
          Player: {
              move: function() {
  
                  game.char.inc += 0.05;
  
                  var 
                      x = game.char.inc, 
                      y = game.char.inc;
  
                      game.char.x = 100 * (Math.cos(x));
                      game.char.y = 100 * (Math.sin(y));
  
              }
  
          },
  
          drawAll: function() {
              game.ctx.clearRect(0,0,800,600);
              game.ctx.save();
              game.ctx.translate(400, 300);
              game.ctx.rotate(Math.cos(game.char.inc));
              game.ctx.fillRect(game.char.x, game.char.y, game.char.w, game.char.h);
              game.ctx.translate(-400, -300);
              window.requestAnimationFrame(game.drawAll);
              game.Player.move();
          }
  }
  $(function() { game.init(); });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mQpSu/2/" rel="nofollow noreferrer">http://jsfiddle.net/mQpSu/2/</a></p>