<meta charset="UTF-8">
<button>Apaga tudo</button>
<canvas width="600" height="400"></canvas>
<body>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var button = document.querySelector("button");
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var desenha = false;
var corAtual = 'red';
var tamanhoQuadrados = 40;
var xVermelho = 0;
var xVerde = tamanhoQuadrados;
var xAzul = 2 * tamanhoQuadrados;
var yQuadrados = 0;
var tamanhoPincel = 5;
function desenhaQuadrado(x, y, tamanho, cor) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanho, tamanho)
pincel.fill();
}
function desenhaCirculo(x, y, tamanhoPincel, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, tamanhoPincel, 0, 2 * 3.14);
pincel.fill();
}
function desenhaPaletaDeCores() {
desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
}
function habilitaDesenhar() {
desenha = true;
}
function desabilitaDesenhar() {
desenha = false;
}
function selecionouVermelho(x, y){
if (x >= xVermelho
&& x < xVerde
&& y >= yQuadrados
&& y <= yQuadrados + tamanhoQuadrados){
console.log ('Selecionou vermelho: ' + x + ', ' + y)
return true
} else return false;
}
function selecionouVerde(x, y){
if (x >= xVerde
&& x < xAzul
&& y >= yQuadrados
&& y <= yQuadrados + tamanhoQuadrados){
console.log ('Selecionou verde: ' + x + ', ' + y)
return true;
} else return false;
}
function selecionouAzul(x, y){
if (x >= xAzul
&& x <= xAzul + tamanhoQuadrados
&& y >= yQuadrados
&& y <= yQuadrados + tamanhoQuadrados){
console.log ('Selecionou azul: ' + x + ', ' + y)
return true
} else return false;
}
function mudaCor (evento){
var xClick = evento.pageX - tela.offsetLeft;
var yClick = evento.pageY - tela.offsetTop;
console.log('Clique = ' + xClick + ', ' + yClick);
if (selecionouVermelho(xClick, yClick)){
corAtual = 'red';
}
if (selecionouVerde(xClick, yClick)){
corAtual = 'green';
}
if (selecionouAzul(xClick, yClick)){
corAtual = 'blue';
}
console.log('Cor atual é ' + corAtual);
}
function foraPaleta (x, y){
if (x > xVermelho
&& x <= xVermelho + 3 * tamanhoQuadrados + tamanhoPincel
&& y >= yQuadrados
&& y < yQuadrados + tamanhoQuadrados + tamanhoPincel){
return false
} else return true;
}
function lidaComMovimentoDoMouse(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(desenha && foraPaleta (x, y)) {
desenhaCirculo(x, y, tamanhoPincel, corAtual);
}
}
function limpaTela (){
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
desenhaPaletaDeCores();
}
desenhaPaletaDeCores();
tela.onmousemove = lidaComMovimentoDoMouse;
tela.onmousedown = habilitaDesenhar;
tela.onmouseup = desabilitaDesenhar;
tela.onclick = mudaCor;
button.onclick = limpaTela;
</script>
</body>
