Animaciones Simples

Es muy curioso observar como el código va tomando forma

<canvas  width='600' height= '400'  ></canvas>

<script>

  document.write("<h1>Hola</h1>")
  var pantalla =document.querySelector("canvas");
  var pincel =pantalla.getContext("2d");
  pincel.fillStyle = "lightgrey" //propiedad 
  pincel.fillRect(0,0,600,400); //función


  function diseñarCircunferencia(x,y,radio){
         pincel.fillStyle = "blue";
         pincel.beginPath();
         pincel.arc(x,y, radio,0,2*Math.PI);
         pincel.fill();

  }


  function limpiarPantalla(){

       pincel.clearRect(0,0,600,400); 
  } 


  var x = 0

  function actualizarPantalla(){
     limpiarPantalla(); 
     diseñarCircunferencia(x,20,10);
     x++;
  }

  setInterval(actualizarPantalla,200);


  //setInterval(diseñarCircunferencia (20,20,10));





</script>