Diseñando el objetivo | Lógica de programación: Practicando con juegos y animaciones

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> titulo barra pagina web </title>
    </head>
<body>
    <h2> titulo </h2>
    <canvas width = "600" height = "600"> </canvas>

    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        posicionX = sorteoP(600);
        posicionY = sorteoP(600);

        pincel.fillStyle = "grey";
        pincel.fillRect(0,0,600,600);

        function dibujaCirculo(x,y,radio,color){

            x = x - pantalla.offsetLeft;
            y = y - pantalla.offsetLeft;
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x,y,radio,0,2*(Math.PI));
            pincel.fill();

        }

        function objetivo (x,y){
            dibujaCirculo(x,y,30,"red");
            dibujaCirculo(x,y,20,"white");
            dibujaCirculo(x,y,10,"red");
        }

        function sorteoP(maximo){
            return Math.floor(Math.random()*maximo);    
        }

        objetivo (posicionX,posicionY);


    </script>

</body>
</html>