Queria uma segunda opinião sobre a coisa toda... principalmente na parte de organização que estou tentando dar uma melhorada nos nomes de função e de comentários laterais (?!) se dá para entender, etc ... aceito qualquer ideia!
<canvas width="600" height="400"></canvas><br>
<button width="100px" id="pequeno">--Small--</button>
<button id="medio">--Normal--</button>
<button id="grande">--Big--</button>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'black'; //Cor Do Background
pincel.fillRect(0, 0, 600, 400);
var cores = ["blue", "red", "green"]; //Paleta de cores
var corAtual = "blue"; //Cor inicial
var a = 0; //Contador
var tamanho = 10;
var botaoI = document.getElementById("pequeno");
var botaoII = document.getElementById("medio"); //Botões de ajuste de tamanho do pincel
var botaoIII = document.getElementById("grande");
listaBotoes = [botaoI, botaoII, botaoIII];
for(var i=0; i < listaBotoes.length; i++) {
listaBotoes[i].style.width="198px";
listaBotoes[i].style.height="50px"; //Estilizador de botões padrão ?!
listaBotoes[i].style.fontSize="20px"
}
function mudaTamanhoPequeno() {
tamanho = 10;
}
function mudaTamanhoMedio() { //Tamanhos dos botões no caso...
tamanho = 25;
}
function mudaTamanhoGrande() {
tamanho = 50;
}
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = corAtual;
pincel.beginPath();
pincel.arc(x, y, tamanho, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
a++
if(a > cores.length-1) {
a = 0
}
corAtual=cores[a];
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
botaoI.onclick = mudaTamanhoPequeno;
botaoII.onclick = mudaTamanhoMedio;
botaoIII.onclick = mudaTamanhoGrande;
</script>