Minha vesão

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>
<style type="text/css">
    canvas{
        border: 2px solid #BBBBBB;
        border-radius: 7px;
    }
</style>

<script>

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

    var desenha = false;
    var cores = ['blue', 'red', 'green', 'yellow'];
    var raioDesenho = 5;
    var sentido = 1;
    let i = 0;

    function desenhaQuadrado(cor) {

        pincel.clearRect(0, 0, 50, 50);
        pincel.fillStyle = cor;
        pincel.fillRect(0, 0, 50, 50);
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    tela.oncontextmenu = function(evento) {

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

        if(x < 50 && y < 50){
            i++;
            if(i >= cores.length){
                i = 0;
            }    
            console.log(cores[i]);
            desenhaQuadrado(cores[i]);
            return false;
        }else{
            if(raioDesenho < 3){
                sentido = 1;
            }
            if (raioDesenho > 7) {
                sentido = -1;
            }
            raioDesenho += sentido;
            console.log(raioDesenho);
            console.log(sentido);
            return false;
        }
    }

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

        if (x > 50 || y > 50) {
            if(desenha) {
                desenhaCirculo(x, y, raioDesenho, cores[i]);
            }
        }
    }

    tela.onmousedown = function(evento) {
        desenha = true;
        if(evento.shiftKey){
            pincel.clearRect(0, 0, 600, 400);
            desenhaQuadrado(cores[i]);
        }

    }

    tela.onmouseup = function() {
        desenha = false;
    }

</script>