creando circulo

<canvas  width="600"  height="400">

</canvas>

<script>
    var tablero=document.querySelector("canvas");
    var pincel=tablero.getContext("2d")

    pincel.fillStyle="grey";
    pincel.fillRect(0,0,600,400);
    var colores = ["LightCoral","Crimson","Pink", "LightPink","HotPink","PaleVioletRed","PeachPuff","Gold","Lavender","Plum","MediumPurple","SlateBlue","LightGreen","MediumAquamarine","DarkSeaGreen","LightSeaGreen","LightCyan","PaleTurquoise","DarkTurquoise","PowderBlue","SkyBlue","LightBlue","HoneyDew","GhostWhite","LavenderBlush"];

    function exibirAlerte(evento){
        var x = evento.pageX - tablero.offsetLeft;
        var y = evento.pageY - tablero.offsetTop
        alert("x= "+ x +", y= "+y)

    }


    function dibujarCirculo(evento){
        var x = evento.pageX - tablero.offsetLeft;
        var y = evento.pageY - tablero.offsetTop;
        var radio = Math.round(Math.random()*30)
        var color = colores[Math.round(Math.random()*colores.length)]

        pincel.beginPath();
        pincel.fillStyle = color;
        pincel.arc(x,y,radio,0,2*3.1416);
        pincel.fill();

        console.log("x: " +x+ "  y: "+y+ "  radio: "+radio+ " color: "+color)




    }

    tablero.onclick = dibujarCirculo;


</script>