script>
var canvas = document.querySelector("canvas")
var pincel = canvas.getContext("2d")
pincel.fillStyle = "lightgrey"
pincel.fillRect(0,0,600,400)
function desenhaBolinha(x,y,raio){
pincel.fillStyle = "violet"
pincel.beginPath()
pincel.arc(x,y,raio,0,2*Math.PI)
pincel.fill()
}
function limpaTela(){
pincel.clearRect(0,0,600,400)
}
var x = 20
var raio = 10
var inverteBolinha = 1
function animaBolinha(){
limpaTela()
desenhaBolinha(x,raio,10)
if(x + raio > 600){ //somei o X + RAIO na primeira condição para que não entre a metade da bolinha na borda na hora da colisão
inverteBolinha *= -1
} else if(x - raio < 0){ // subtrai o X - RAIO para que não entre metade da bolinha na hora da colisão
inverteBolinha *= 1
}
x += inverteBolinha
}
setInterval(animaBolinha,10)
</script>