Aportación |

<canvas width="600" height="400"></canvas>
<script>
    pantalla = document.querySelector("canvas");
    pincel = pantalla.getContext("2d");

    //crear el gradiante linear
    // x1 y y1 donde empieza la cordenada
    // x2 y y2 donde termina la cordenada
    gradiante = pincel.createLinearGradient(20,0,300,0);

    //Agregar los 2 colores

    gradiante.addColorStop(0,"#19bae6");
    gradiante.addColorStop(1,"#005BEA");

    //usar fillStyle y dibjar el rectangulo
    pincel.fillStyle= gradiante;
    pincel.fillRect(0,0,600,400);

    function exibirAlerta(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento);
        alert("Usted hizo un clic " + x + " , "+ y);
    }

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        pincel.fillStyle="#A2C723";
        pincel.beginPath();
        pincel.arc(x,y,10,0,Math.PI*2);
        pincel.fill();

        console.log( x + " , "+ y);
    }

    pantalla.onclick = dibujarCirculo;

</script>