title: javascript coordinate movement
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
      &lt;title&gt;repl.it&lt;/title&gt;
      &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button id='btn'&gt;CLICK ME&lt;/button&gt;
      &lt;canvas id=&quot;canvas&quot; width=&quot;1000&quot; height=&quot;400&quot;&gt;
        
  
      &lt;/canvas&gt;
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>let x = 50;
  let y = 50;
  
  let c = document.getElementById('canvas');
  let ctx = c.getContext(&quot;2d&quot;);
  ctx.beginPath();
  ctx.arc(x,y,40,0,2 * Math.PI);
  ctx.stroke();
  
  let button = document.getElementById('btn');
  button.onclick = function(event) {
    if(event.which == 1) {
      x += 5;
      console.log(x);
    }
  }
  </code></pre>
  <p>I made a Circle <code>CTX</code>, I wanted it to move when I click the button, But when I click it nothing happens so I tried logging in the console if the <code>X</code> variable  is changing when I click the button and it is changing but still the Circle won't move. Is there any problem? Is there any other way to make the circle move?</p>