<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);
//variaveis
var cores = ["blue", "red", "green", "pink", "black", "yellow", "White"]
var indiceCor = 0;
var tamanho = 10;
var desenharSegurando = false;
var desenharClique = false;
//para mudar cor
tela.oncontextmenu = function (){
indiceCor++;
if(indiceCor >= cores.length){
indiceCor = 0
}
return false;
}
//função para desenhar o circulo pressionando botao do mouse
function desenhaCirculoSegurando(evento) {
if (desenharSegurando){
if (evento.shiftKey && evento.altKey){
alert("Aperte uma tecla por vez");
} else if (evento.shiftKey && tamanho <= 40){
tamanho = tamanho + 10;
} else if (evento.altKey && tamanho - 5 >= 10){
tamanho = tamanho - 5;
}
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[indiceCor];
pincel.beginPath();
pincel.arc(x,y,tamanho,0,2*3.14)
pincel.fill();
}
}
//função para desenhar o circulo com um clique so
function desenhaCirculoClique(evento) {
if (desenharClique){
if (evento.shiftKey && evento.altKey){
alert("Aperte uma tecla por vez");
} else if (evento.shiftKey && tamanho <= 40){
tamanho = tamanho + 10;
} else if (evento.altKey && tamanho - 5 >= 10){
tamanho = tamanho - 5;
}
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[indiceCor];
pincel.beginPath();
pincel.arc(x,y,tamanho,0,2*3.14)
pincel.fill();
}
}
//para desenhar com um clique só
tela.onclick = function (){
desenharClique = true;
tela.onclick = desenhaCirculoClique;
}
//para desenhar segurando
tela.onmousemove = desenhaCirculoSegurando;
tela.onmouseup = function(){
desenharSegurando = false;
}
tela.onmousedown = function() {
desenharSegurando = true;
}
</script>
Queria deixar o código mais enxuto, mas não consegui até o momento, se alguém tiver alguma dica será de grande ajdua. Obrigada!