Fiz uns incrementos :)

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

<script type="text/javascript">

    var tela=document.querySelector('canvas');
    var p=tela.getContext('2d');

    p.fillStyle='lightgray';
    p.fillRect(0,0,600,400);

    var cores=['blue','yellow','red','purple','orange'];
    var corAtual=0;

    function desenhaCirculo(evento) {

        var x=evento.pageX-tela.offsetLeft;
        var y=evento.pageY-tela.offsetTop;

        p.fillStyle=cores[corAtual];
        p.beginPath();
        p.arc(x,y,10,0,2*3.14);
        p.fill();
        console.log(x+','+y);


        if (evento.shiftKey==true) {

            p.fillStyle=cores[corAtual];
            p.beginPath();
            p.arc(x,y,30,0,2*3.14);
            p.fill();
            console.log(x+','+y);

        }
    }

    tela.onclick=desenhaCirculo;

    function mudaCor() {

        corAtual++;

        if (corAtual>=cores.length) {

            corAtual=0;

        }
        return false;
    }

    tela.oncontextmenu=mudaCor;

</script>