title: How to rotate a Canvas object around its center following mouse move event?
body: <p>Hi I want to rotate this shape around its center when I move my mouse, but currently it's rotating around (0, 0). How to change my code?</p>
  
  <p>Source code (also see <a href="https://jsfiddle.net/1qrh9LoL/" rel="nofollow">jsfiddle</a>):</p>
  
  <pre><code>var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  class Circle {
      constructor(options) {
      this.cx = options.x;
      this.cy = options.y;
      this.radius = options.radius;
      this.color = options.color;
      this.angle = 0;
      this.toAngle = this.angle;
  
      this.binding();
    }
  
    binding() {
      const self = this;
      window.addEventListener('mousemove', (e) =&gt; {
          self.update(e.clientX, e.clientY);
      });
    }
  
    update(nx, ny) {
      this.toAngle = Math.atan2(ny - this.cy, nx - this.cx);
    }
  
    render() {
      ctx.clearRect(0,0,canvas.width,canvas.height);
  
      ctx.save();
  
      ctx.beginPath();
  
      ctx.lineWidth = 1;
  
      if (this.toAngle !== this.angle) {
        ctx.rotate(this.toAngle - this.angle);
      }
  
      ctx.strokeStyle = this.color;
      ctx.arc(this.cx, this.cy, this.radius, 0, Math.PI * 2);
  
      ctx.stroke();
      ctx.closePath();
  
      ctx.beginPath();
  
      ctx.fillStyle = 'black';
      ctx.fillRect(this.cx - this.radius / 4, this.cy - this.radius / 4, 20, 20);
  
      ctx.closePath();
      ctx.restore();
    }
  }
  
  var rotatingCircle = new Circle({
    x: 150,
    y: 100,
    radius: 40,
    color: 'black'
  });
  
  function animate() {
      rotatingCircle.render();
      requestAnimationFrame(animate);
  }
  
  animate();
  </code></pre>