Código

<p class="coords">Coordenada actual : ( x, y ), Cantidad círculos: 0</p>
<canvas class="layout" width="600" height="400"></canvas>

<style>
    .layout {
        border: 1px dotted blue;
    }
</style>
<script>

    const
        canvasEl = document.querySelector( 'canvas.layout' ),
        ctx = canvasEl.getContext( '2d' ),
        pEl = document.querySelector( 'p.coords' );

    let counter = 0;

    function alertWithCoordinates( x, y ) {
        // alert( `( ${ x }, ${ y } )` );
        console.log( `( ${ x }, ${ y } )` );
        pEl.innerHTML = `Coordenada actual : ( ${ x }, ${ y } ), Cantidad círculos: ${ ++counter }`;
    }

    function drawCircle( x, y ) {
        const
            colors = [ 'black', 'red', 'green', 'yellow', 'blue', 'deepskyblue', 'orange', 'chocolate', 'lemonchiffon', 'yellowgreen' ],
            radio = 10,
            angulo_inicial = 0,
            angulo_final = 2 * 3.141516;
            item = Math.round( Math.random() * colors.length );

        ctx.fillStyle = colors[ item ];
        ctx.beginPath();
        ctx.arc( x, y, radio, angulo_inicial, angulo_final );
        ctx.fill();
    }

    canvasEl.addEventListener( 'click', ( event ) => {
        const
            x = event.pageX - canvasEl.offsetLeft,
            y = event.pageY - canvasEl.offsetTop;

        alertWithCoordinates( x, y );
        drawCircle( x, y );
    });

</script> 

Resultado en mi CodePen

https://codepen.io/pen?template=qBoxWxJ