title: How to rotate a canvas by following mouse if the canvas already has something drawn on it
body: <p>I currently have a canvas that has an element drawn on it that I draw using a custom function and the onload function I would like to know how to be able to rotate this canvas around by following the mouse 360 degrees like turning a wheel. The code is as follows </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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      
      &lt;head&gt;
          &lt;title&gt;Help&lt;/title&gt;   
      &lt;/head&gt;
      &lt;body&gt;
         
          &lt;canvas id="MyCanvas" width="500" height="500"&gt;&lt;/canvas&gt;
          &lt;script&gt;
              var ctx = document.getElementById("MyCanvas").getContext("2d");
                  ctx.translate(250,250);
              function draw(){  
                  ctx.arc(0,0,100,0,Math.PI*2,false);  // x, y, radius, start angle, end angle, false/true  
                  ctx.stroke();
                  ctx.beginPath();
                  ctx.moveTo(-100,0);
                  ctx.lineTo(100,0);
                  ctx.moveTo(100,0);
                  ctx.lineTo(60,-80);
                  ctx.moveTo(60,-80);
                  ctx.lineTo(-100,0);
                  ctx.stroke();
              } 
              window.onload=draw;
          &lt;/script&gt;
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone know how this would be possible I have tried multiple different functions. however, they do not seem to be able to do anything. 
  help will be very appreciated.</p>
  
  <p>Edited but with slight issue </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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      
      &lt;head&gt;
          &lt;title&gt;Help&lt;/title&gt;   
      &lt;/head&gt;
      
      &lt;style&gt;
      canvas{
           border: 2px solid black;
          }
      &lt;/style&gt;
      
      &lt;body&gt;
         
          &lt;canvas id="Canvas" height="300"&gt;&lt;/canvas&gt;
          
          &lt;script&gt;
              const ctx = canvas.getContext("2d");
              
              const mouse = { x: 0, y: 0 };
              function mouseEvents(e) {
                const bounds = canvas.getBoundingClientRect();
                mouse.x = e.pageX - bounds.left - scrollX;
                mouse.y = e.pageY - bounds.top - scrollY;
              }
              document.addEventListener("mousemove", mouseEvents);
  
              
              function drawRotated(x, y, angle) {
                ctx.setTransform(1, 0, 0, 1, x, y);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.arc(0, 0, 100, 0, Math.PI * 2);
                ctx.moveTo(-100, 0);
                ctx.lineTo(100, 0);
                ctx.lineTo(60, -80);
                ctx.closePath();
                ctx.stroke();
              }
  
              
              function update(timer) {
                ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
                ctx.clearRect(0, 0, 300, 300);
  
                
                var angle = Math.atan2(mouse.y - 150, mouse.x - 150);
  
                
                drawRotated(150, 150, angle);
                requestAnimationFrame(update);
              }
              requestAnimationFrame(update);
          &lt;/script&gt;
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>