<canvas width="640" height="420"></canvas>
<script>
// cria uma variavel = puxa o documento canvas do mundo html
// canvas = tela de desenho
var screen = document.querySelector('canvas');
// cria uma variavel que puxa elementos 2d, como circulo, quadrado, retangulo...
var brush = screen.getContext('2d');
// codigo que define cor de uma variavel (brush no caso)
brush.fillStyle = 'grey';
//variavel que define a pos(x, y, width, height) de um retangulo (rect)
brush.fillRect(0, 0, 600, 400);
//variavel de cores disponiveis
var color = ['blue', 'red', 'green'];
//variavel que mostra o inicio das cores disponiveis, 0 = primeiro em array
var currentColor = 0;
//draw = false, só desenha se algum codigo mudar para true
var draw = false;
//arco do circulo inicial
var arc = 10;
//função do circulo
screen.onmousemove = function (event) {
// faz com que o navegador reconheça o seu mouse
// faz reconhecer o x,y apenas do canvas.
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
//oncontextmenu = botão direito
screen.oncontextmenu = changeColor;
console.log(event);
// if shift = aumenta o arco do circulo, if ctrl = diminui
// if shift+ctrl = alerta de aderencia
if (event.shiftKey && event.ctrlKey) {
alert('Só aperte uma tecla por vez, por favor!');
} else if(event.shiftKey && arc + 5 <= 40) {
arc = arc + 5;
} else if(event.ctrlKey && arc - 5 >= 5) {
arc = arc - 5;
}
//função atribuida direta em um comando.
screen.onmousedown = function() {
draw = true;
}
screen.onmouseup = function() {
draw = false;
}
//se draw = true, exerce comando de pintar
if(draw) {
brush.fillStyle = color[currentColor];
brush.beginPath();
brush.arc(x, y, arc, 0, 2*Math.PI);
brush.fill();
}
/*
//reconhecer movimento do mouse na screen do canvas
screen.onmousemove = showCircle;
porém ela se tornou inutil quando atrelei ela a função showCircle que agora é anonima.
*/
}
//trocar cor puxando array do Color
function changeColor() {
currentColor++;
if(currentColor >= color.length){
currentColor = 0
}
return false;
}
</script>