var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
function disenharCircunferencia(x,y,radio){
/*concadenamos la cadena de texto "rgb(tonorojo,tonoverde,tonoazul) por partes"
* y convertimos los numeros aleatorios a string con el codigo (Math.random()*255).toString()
* cada (Math.random()*255).toString() representa cada tonalidad respectivamente
*/
pincel.fillStyle = "rgb"+"("+(Math.random()*255).toString()+
","+(Math.random()*255).toString()+","
+(Math.random()*255).toString()+")";
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,1000,800);
}
function colorAleatorio(){
let tonoRojo=Math.random()*255;
let tonoVerde=Math.random()*255;
let tonoAzul=Math.random()*255;
let color = tonoRojo.toString();
return color
}
let x = 0;
let y = 0;
let radio = 0;
//mueve aleatoriamente la circunferencia
function actualizarPantalla(){
limpiarPantalla();
disenharCircunferencia(x,y,radio);
x=Math.random()*600;
y=Math.random()*400;
radio=Math.random()*100;
}
//funcion para mover la circunferencia con el cursor del mouse
function movercircunferencia(evento){
limpiarPantalla();
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
disenharCircunferencia(x,y,30);
}
setInterval(actualizarPantalla,500);
pantalla.onpointermove = movercircunferencia;