Fala galera,
Olha eu aqui novamente com outro código legal que deu muita dor de cabeça novamente rsrsrsr. Espero que seja util. :)
<h1>..:: Desenhe ::..</h1>
<canvas id="tela" width="400" height="300"></canvas>
<br>
Cor selecionada/ativa: <input id="corCirculo" size="2" value="blue">
<button id="remover">Remover</button>
<script>
var tela = document.querySelector('#tela');
var lapis = tela.getContext('2d');
var tabelaTiros = [];
var tabelaCor = ['blue', 'red', 'green']
var idCor = 0; // começa com blue <input>
function montaTela(fundo, borda) {
lapis.fillStyle = fundo;
lapis.fillRect(0, 0, 400, 300)
lapis.strokeStyle = borda;
lapis.strokeRect(0, 0, 400, 300)
}
montaTela('Cyan','DarkRed');
function removeTiros() {
var aux = document.querySelector('#corCirculo');
for (var i = tabelaTiros.length ; i >= 0 ; i = i-3) {
if (tabelaTiros[i] == aux.value) {
tabelaTiros.splice(i, 3);
}
}
montaTela('Cyan','DarkRed');
for (var i = (tabelaTiros.length - 3) ; i >= 0 ; i = i-3) {
refazTiros(tabelaTiros[i], tabelaTiros[i+1], tabelaTiros[i+2]);
}
}
function refazTiros(cor, x, y) {
lapis.fillStyle = cor;
lapis.beginPath();
lapis.arc(x, y, 10, 0, 2*Math.PI);
lapis.fill();
}
var remover = document.querySelector('#remover');
remover.onclick = removeTiros;
function tiro(evento) {
lapis.fillStyle = tabelaCor[idCor];
tabelaTiros.push(tabelaCor[idCor]);
var x = evento.pageX - tela.offsetLeft;
tabelaTiros.push(x);
var y = evento.pageY - tela.offsetTop;
tabelaTiros.push(y);
lapis.beginPath();
lapis.arc(x, y, 10, 0, 2*Math.PI);
lapis.fill();
for (var i=0 ; i < tabelaTiros.length ; i++) {
console.log(tabelaTiros[i]);
}
}
tela.onclick = tiro;
function trocaCor() {
idCor++
if (idCor >= tabelaCor.length) {
idCor = 0;
}
var aux = document.querySelector('#corCirculo'); // ou var a = document.getElementById('corCirculo');
aux.value = tabelaCor[idCor]
return false;
}
tela.oncontextmenu = trocaCor;
</script>