Your not redrawing the canvas with the new data, you should create a main function and update x amount of times per second, or update it when you change things.
let x = 50;
let y = 50;
let c = document.getElementById('canvas');
let ctx = c.getContext("2d");
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x,y,40,0,2 * Math.PI);
ctx.stroke();
}
draw()
let button = document.getElementById('btn');
button.onclick = function(event) {
if(event.which == 1) {
x += 5;
draw()
console.log(x);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id='btn'>CLICK ME</button>
<canvas id="canvas" width="1000" height="400">
</canvas>
<script src="script.js"></script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
