Eu percebi que meu código acabou ficando redundante, mas vou postar, pois, gostaria de compreender melhor essa lógica entre as funções. Alguém pode me explicar ? Eu entendo que a variável que foi criadou vínculo entre as funções, só não compreendo bem como criou vínculo com a função desenhaCirculo() sem o uso do if(). São os próprio eventos então que conecta as funções?
let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');
pincel.fillStyle = 'gray';
pincel.fillRect(0, 0, 600, 400);
let botaoPressionado = false;
function desenhaCirculo(evento){
if(botaoPressionado){
let x = evento.pageX - tela.offsetLeft;
let 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);
}
if(botaoPressionado){
desenhaBotaoEsquerdo();
}else{
desenhaBotaoDireito();
}
}
tela.onmousemove = desenhaCirculo;
function desenhaBotaoEsquerdo(){
botaoPressionado = true;
}
tela.onmousedown = desenhaBotaoEsquerdo;
function desenhaBotaoDireito(){
botaoPressionado = false;
}
tela.onmouseup = desenhaBotaoDireito;
Obrigada!