Fiz o exercício porém não consegui mais fazer "pontos" quando fica com o cursor do mouse parado e aperta o botão. O programa agora só consegue desenhar quando o mouse está em movimento por menor que seja mas parado não sai o desenho do círculo. Como faço?
<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle ='grey';
pincel.fillRect(0,0,600,400);
var cores = ['blue', 'red', 'green'];
var indiceCorAtual = 0; // começa com blue
var raio = 10;
var desenha =false;
function exibeCirculo(clique){// o evento é o clique do mouse
var x = clique.pageX - tela.offsetLeft;
var y = clique.pageY - tela.offsetTop;
if (desenha){
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x , y, raio ,0 , 2*3.14);
pincel.fill();
tamanhoCirculo(clique);
}
}
function habilitaDesenhar() {
desenha = true;
}
function desabilitaDesenhar() {
desenha = false;
}
function desenhaPonto() {
desenha = true;
}
function mudaCor(){
indiceCorAtual ++;
if (indiceCorAtual>=cores.length){
indiceCorAtual=0;
}
alert(cores[indiceCorAtual]);
return false;
}
function tamanhoCirculo(evento){
if (evento.shiftKey && raio<=30){
//alert('Você apertou o shift');
raio = raio+10;
}
else if(evento.altKey && raio>=15){
raio=raio -5;
}
}
tela.onmousedown = habilitaDesenhar;
tela.onmouseup = desabilitaDesenhar;
tela.onclick = desenhaPonto;
tela.onmousemove = exibeCirculo;
tela.onclick = exibeCirculo;// O "evento" é o clique do mouse
tela.oncontextmenu=mudaCor; // "oncontextmenu" usa o botão direito do mouse
</script>