nÃO CONSIGO MELHORAR O CÓDIGO

Meu rei, pelo que entendi o seu problema estava na hora de utilizar o parâmetro offset, correto?

primeiramente inseri os parâmetros do offset na função florLocalizada():

    function florLocalizada(coordenada){
        var x = coordenada.pageX - tela.offsetLeft; //coordenada x é metida pela linha horizontal, por isso utiliza-se o offsetLeft
        var y = coordenada.pageY - tela.offsetTop; //coordenada y é medida por uma linha vertical vertical e por isso utiliza-se offsetTop
        desenhaFlor(x,y);
    }

Após isso realizei o teste do código e, como esperado, a flor foi desenhada no centro do mouse. Porém se o problema era: o desenho só aparecer quando o botão do mouse era solto, então ao invés de utilizar o onclick, da pra usar o onmousedown que vai desenhar a flor exatamente onde o mouse se encontra.

tela.onmousedown = florLocalizada;

E, no final o códico alterado ficou assim:

<meta charset = "UTF-8">
<h1> Uma infensiva flor... </h1>

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);


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

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

    function desenhaFlor(x,y){
    desenhaCirculo(x,y,10,'red');
    desenhaCirculo(x + 20,y,10,'black');
    desenhaCirculo(x - 20,y,10,'green');
    desenhaCirculo(x,y - 20,10,'yellow');
    desenhaCirculo(x,y + 20,10,'blue');
    }

    /*Desenha uma flor com os mesmos padrões da anterior porém começará a partir da flor central que será definida através do clique.function florLocalizada*/

    function florLocalizada(coordenada){
        var x = coordenada.pageX - tela.offsetLeft;
        var y = coordenada.pageY - tela.offsetTop;
        desenhaFlor(x,y);
    }
    function evento(evento){
        console.log(evento);
    }

    // Início da execução dos códigos
    desenhaFlor(300,200);
    tela.onmousedown = florLocalizada; // desenha uma flor no local em que o mouse foi clicado
    //tela.onclick = florLocalizada; // desenha uma flor no local em que o botão do mouse foi solto

    </script>

• Offset: funcionando;
• Desenhando no centro do clique: funcionando;

Espero ter ajudado. õ/