<meta charset="UTF-8">
<canvas width="600" height="400"> </canvas>
<script>
//funciones
function graficarCirculo(x,y,radio){
pincel.fillStyle="blue"; // TIPO PROPIEDAD - con esto le damos color al trazo
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
function actualizarPantalla(){
if(lugar){
x++
if (x>590){
lugar=false;
}
}
else{
x--
if (x<10){
lugar=true;
}
}
limpiarPantalla();
graficarCirculo(x,20,10);
}
//variables
var pantalla=document.querySelector("canvas"); // conectamos la etiqueta canvas con java script
var pincel=pantalla.getContext("2d"); //encargado de graficar en el canvas
pincel.fillStyle="darkgrey";
pincel.fill();
var x=10;
var lugar=true;
setInterval(actualizarPantalla,5);