How to rotate an canvas object while the object stays on the same place
<p>I am creating a Javascript game. It is about a guy who stands on top of the world. I already have an earth and now I need to rotate it but when I rotate it it also changes it place. </p>

<p><a href="https://i.stack.imgur.com/yz8qe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yz8qe.png" alt="Earth"></a>
<a href="https://i.stack.imgur.com/nOp8F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOp8F.png" alt="Earth"></a></p>

<p>As you can see the earth rotates but it also changes its place. I want it to rotate just like the rotate keyframes from css. Any thoughts?</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;link rel="stylesheet" href="Style.css"/&gt;
&lt;/head&gt;
&lt;body onload="draw()"&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;script&gt;
var ctx = document.getElementById("canvas").getContext('2d');
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
    
setInterval(draw, 10);
function draw() {
    var img = new Image();
    img.onload = function(){
    ctx.rotate(1*Math.PI/180);
    ctx.drawImage(img,canvas.width/2-200,canvas.height/2-100,300,300);
  };
  img.src = "earth.png";
}
&lt;/script&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p><strong>The code doesn't work because it cant load the image because i have it downloaded but now you guys have the code so you can see the problem.</strong></p>