Como meu coração fica depois de tomar uma garrafa de café em menos de 2 horas.
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação</title>
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "Lightgray";
pincel.fillRect(0, 0, 400, 400);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = "black";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 400, 400);
}
var x = 20;
var sentido = 1;
function atualizaTela() {
limpaTela();
if(x == 20){
sentido = 1;
}else if(x >= 30) {
sentido = -1
}
x = x + sentido;
//Minha forma, acho que era isso.
//desenhaCirculo(x, 100, 50);
//desenhaCirculo(100, 50, x);
}
setInterval(atualizaTela, 1);
</script>
</body>
</html>