Dúvida sobre acoplamento e coesão do código

Olá, sobre o aspecto da relação entre acoplamento e coesão, esse código estaria adequado? (baixo acoplamento, alta coesão)

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script type="text/javascript">

    // Declaração de variáves
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var desenho_habilitado = false;
    var raio_padrao = 10;
    var tamanho_quadrados = 50;
    var ponto_x_vermelho = 10;
    var ponto_x_verde = ponto_x_vermelho + tamanho_quadrados;
    var ponto_x_azul = ponto_x_verde + tamanho_quadrados;
    var ponto_y_quadrados = 340;
    var cor_atual = "blue";


    // Desenha o canvas
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);
    pincel.strokeRect(0, 0, 600, 400);


    function desenhaQuadrado(ponto_x, ponto_y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(ponto_x, ponto_y, tamanho, tamanho);
        pincel.strokeRect(ponto_x, ponto_y, tamanho, tamanho);
    }


    function desenhaCirculo(ponto_x, ponto_y, raio) {

        pincel.fillStyle = cor_atual;
        pincel.beginPath();
        pincel.arc(ponto_x, ponto_y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }


    function mostraMenuCores() {

        desenhaQuadrado(ponto_x_vermelho, ponto_y_quadrados, tamanho_quadrados, "red");
        desenhaQuadrado(ponto_x_verde, ponto_y_quadrados, tamanho_quadrados, "green");
        desenhaQuadrado(ponto_x_azul, ponto_y_quadrados, tamanho_quadrados, "blue");
    }


    function desenha(evento) {

        var ponto_x = evento.pageX - tela.offsetLeft;
        var ponto_y = evento.pageY - tela.offsetTop

        if (desenho_habilitado && ponto_y <= (ponto_y_quadrados -15)) {

            desenhaCirculo(ponto_x, ponto_y, raio_padrao);

        }
    }


    function habilitaDesenho() {

        desenho_habilitado = true;
    }


    function desabilitaDesenho() {

        desenho_habilitado = false;
    }


    function apagaDesenho() {

        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0, 0, 600, 400);
        pincel.strokeRect(0, 0, 600, 400);
        mostraMenuCores();
        return false;
    }


    function alteraCor(evento) {

        var ponto_x_clique = evento.pageX - tela.offsetTop;
        var ponto_y_clique = evento.pageY - tela.offsetLeft;

        console.log(ponto_x_clique, ponto_y_clique);

        // Seleciona vermelho
        if ((ponto_x_clique >= ponto_x_vermelho) &&
            (ponto_x_clique <= (ponto_x_vermelho + tamanho_quadrados)) &&
            (ponto_y_clique >= ponto_y_quadrados) &&
            (ponto_y_clique <= (ponto_y_quadrados + tamanho_quadrados))
            ) {

            cor_atual = "red";
        }

        // Seleciona verde
        if ((ponto_x_clique > ponto_x_verde) &&
            (ponto_x_clique < (ponto_x_verde + tamanho_quadrados)) &&
            (ponto_y_clique > ponto_y_quadrados) &&
            (ponto_y_clique < (ponto_y_quadrados + tamanho_quadrados))
            ) {

            cor_atual = "green";
        }

        // Seleciona azul
        if ((ponto_x_clique > ponto_x_azul) &&
            (ponto_x_clique < (ponto_x_azul + tamanho_quadrados)) &&
            (ponto_y_clique > ponto_y_quadrados) &&
            (ponto_y_clique < (ponto_y_quadrados + tamanho_quadrados))
            ) {

            cor_atual = "blue";
        }


    }

    mostraMenuCores();
    tela.onclick = alteraCor;
    tela.onmousemove = desenha;
    tela.onmousedown = habilitaDesenho;
    tela.onmouseup = desabilitaDesenho;
    tela.oncontextmenu = apagaDesenho;

    console.log(ponto_x_vermelho, ponto_y_quadrados);
    console.log(ponto_x_verde, ponto_y_quadrados);
    console.log(ponto_x_azul, ponto_y_quadrados);


</script>