COLOQUEI BOTOES PARA ESCOLHER CORES!

Ola pessoal! Meu primeiro topico por aqui. Sou novo na Alura, fiz o curso de logica I e agora estou no II. Neste exercicio, resolvi, ao inves de alternar entre os botoes do mouse, colocar buttons para o usuario escolher a cor desejada. Pesquisei no google duas coisas que ainda nao aprendi no curso, para poder fazer o codigo, a primeira seria colocar id no button e a segunda, como chamar este button pela id (document.getElementById).

Fora isso, peguei o exemplo dado na ordem do exercicio, joguei o tela.onclick pra dentro da funcao e fora dela, deixei o var button e o button.onclick.

criei tres funcoes, uma com cada cor solicitada no exercicio.

Gostaria de uma dica de como por os botoes la no topo da tela, pois desse jeito, a tela carrega eles la no canto inferior direito.

Enfim, eh isso. Queria compartilhar com voces o que consegui fazer.

Um abraco a todos e bons estudos!

button id = "azul">Azul</button utton id = "vermelho">Vermelho</button button id = "verde">Verde</button

script>

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

pincel.fillStyle = 'darkgrey';
pincel.fillRect(0, 0, 600, 400);

 function desenhaCirculoAzul(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY; - tela.offsetTop;
    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill();
    console.log(x + ',' + y);
    tela.onclick = desenhaCirculoAzul;
}

var button = document.getElementById("azul");
button.onclick = desenhaCirculoAzul;

function desenhaCirculoVermelho(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY; - tela.offsetTop;
    pincel.fillStyle = 'red';
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill();
    console.log(x + ',' + y);
    tela.onclick = desenhaCirculoVermelho;
}

var button = document.getElementById("vermelho");
button.onclick = desenhaCirculoVermelho;

function desenhaCirculoVerde(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY; - tela.offsetTop;
    pincel.fillStyle = 'green';
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill();
    console.log(x + ',' + y);
    tela.onclick = desenhaCirculoVerde;
}

var button = document.getElementById("verde");
button.onclick = desenhaCirculoVerde;

</script