Meu "Paintzinho" <3

Gente, tô muito orgulhosa de mim por ter conseguido executar esse "programinha" <3

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

<script>

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

    // Tela do Canvas 600x400
    pincel.fillStyle = "lightyellow"
    pincel.fillRect(0,0,600,400);

    function desenhaQuadrado (x,y,largura,altura,cor){

        pincel.fillStyle = cor;
        pincel.fillRect(x,y,largura,altura);
        pincel.strokeStyle = "Lightgrey";
        pincel.strokeRect(x,y,largura,altura);
    }

    function desenhaGrafico(x, y, serie, cores) {

        var somaAltura = 0;

        for (posicao = 0; posicao <= serie.length; posicao++){
            var altura = serie[posicao];        
            desenhaQuadrado (x, y + somaAltura, 50, altura, cores[posicao]);
            somaAltura = somaAltura + altura
        }
    }

    var dados = [];
    var cores1 = [];


    function desenhaEsquadro(xa,ya,xc,yc,cor) {
        // Desenha um Esquadro;

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xa,ya);
        pincel.lineTo(xa,yc);
        pincel.lineTo(xc,yc);
        pincel.fill();
    }


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

        // Desenha um circulo
        pincel.fillStyle = cores;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }

    var fazDesenho = false;

    var cores = ["red","orange","yellow","green","blue","indigo","purple","hotpink"];
    var indiceCores = 0;

    var raio = 10
    function imprimeBolinha(evento){

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

            desenhaCirculo(x,y,raio,cores[indiceCores]);

            if(evento.shiftKey == true && raio < 60){
                desenhaCirculo(x,y,raio,cores[indiceCores]);
                raio = raio + 2;
            }
            if (evento.ctrlKey == true && raio > 10) {
                desenhaCirculo(x,y,raio,cores[indiceCores]);
                raio = raio - 2
            }
        }
        console.log(x +"," + y);
    }

    tela.onmousemove = imprimeBolinha;

    function mudaCor(){
        indiceCores++

        if(indiceCores >=  cores.length){
            indiceCores=0
        } return false

    }

    tela.oncontextmenu = mudaCor;

    function desenhaSim(){
        fazDesenho = true
    }

    function desenhaNao(){
        fazDesenho = false
    }

    tela.onmousedown = desenhaSim;
    tela.onmouseup = desenhaNao;



</script>