onclick e não onmousedown

Olá Bernardo, tudo bem?

Para associarmos uma ou mais funções a um determinado MouseEvent (evento do mouse), podemos usar tanto uma expressão como essa tela.onmousedown = habilitaDesenhar, como uma expressão como essa tela.addEventListener("mousedown", habilitaDesenhar).

Nos dois casos nós temos que a função habilitaDesenhar() está sendo executada toda vez que o elemento HTML canvas, que trouxemos ao mundo JavaScript com o nome de tela, registra um evento do mouse.

A diferença do primeiro caso para o segundo é que no primeiro eu consigo associar apenas uma unica função àquele determinado evento do mouse, sendo que, caso eu insira duas linhas de código em que esse evento esteja associado a duas funções diferentes, a última linha irá sobrepor a primeira e somente a última função será executada de fato.

Exemplo: Na linha 38 de um código hipotético eu tenho tela.onclick = desenhaCirculoVermelho e na linha 39 desse mesmo código eu tenho tela.onclick = desenhaCirculoVerde. Nesse caso, meu código iria ler as duas linhas, mas apenas executaria a segunda, já que ela se sobrepõe à primeira, e eu apenas conseguiria desenhar o circulo verde quando eu clicasse.

Já no segundo caso, com o uso do tela.addEventListener("mouseEvent", função), eu consigo associar mais de uma função para o mesmo evento, pois nesse caso, usando duas linhas de código associadas ao mesmo evento com funções diferentes, meu código irá ler as duas linhas e as duas serão executadas simultaneamente, de modo que não haja exclusão de nenhuma das funções.

Exemplo: Na linha 38 de um código hipotético eu tenho tela.addEventListener("click", desenhaCirculoVermelho) e na linha 39 tela.addEventListener("click", desenhaCirculoVerde). Imaginemos que na função desenhaCirculoVermelho() o círculo tenha raio 30 e na função desenhaCirculoVerde() o círculo tenha raio 20. Se fosse no caso do tela.onclick, quando eu clicasse, apenas iria desenhar o círculo verde de raio 20 e não teria nenhum circulo vermelho. Mas nesse caso do tela.addEventListener, ao clicar, eu desenharia um circulo vermelho de raio 30 e dentro dele um circulo verde de raio 20.

Caso não tenha ficado tão claro, compare esses dois códigos

1º código

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

<script>

    function desenhaCirculoVermelho(evento) {

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

        pincel.fillStyle = 'red';
        pincel.beginPath();
        pincel.arc(x, y, 30, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaCirculoVerde(evento) {

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

        pincel.fillStyle = 'green';
        pincel.beginPath();
        pincel.arc(x, y, 20, 0, 2 * 3.14);
        pincel.fill();

    }

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

    tela.onclick = desenhaCirculoVermelho;
    tela.onclick = desenhaCirculoVerde;

</script>

2º código

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

<script>

    function desenhaCirculoVermelho(evento) {

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

        pincel.fillStyle = 'red';
        pincel.beginPath();
        pincel.arc(x, y, 30, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaCirculoVerde(evento) {

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

        pincel.fillStyle = 'green';
        pincel.beginPath();
        pincel.arc(x, y, 20, 0, 2 * 3.14);
        pincel.fill();

    }

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

    tela.addEventListener("click", desenhaCirculoVermelho);
    tela.addEventListener("click", desenhaCirculoVerde);

</script>

Espero ter ajudado e qualquer dúvida estou à disposição.

Ótima resposta, obrigado