Refiz meu código após ver algumas alterações do instrutor, pois cortou legal algumas linhas nos onmouse... da vida kkkkk Vi que colegas já fizeram com arrow function ficou show de bola e bem clean, mas ainda preciso entender como funciona para poder usar tbm.
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desenhando na tela com troca de cor</title>
</head>
<body>
<div>
<canvas id="tela" width="600px" height="400px"></canvas>
<script src="tela.js"></script>
</div>
</body>
</html>JS
const tela = document.querySelector("#tela");
const pincel = tela.getContext("2d");
pincel.fillStyle="lightgray";
pincel.fillRect(0,0,600,400);
const cores=["blue","red","green","orange","white"];
let corAtual = 0;
let raio = 5;
let mouseFlag=false;
tela.onmousemove= function (evento){
if(mouseFlag){
let posX = evento.pageX - tela.offsetLeft;
let posY = evento.pageY - tela.offsetTop;
pincel.fillStyle=cores[corAtual];
pincel.beginPath();
if(evento.shiftKey && raio>=2 && raio<40){
raio+=0.05;
}else if(evento.ctrlKey && raio-2>=2){
raio-=0.1;
}
pincel.arc(posX,posY,raio,0,2*Math.PI)
pincel.fill();
console.log(corAtual);
}
}
tela.oncontextmenu = mudaCores;
tela.onmousedown = function(){
mouseFlag=true;};
tela.onmouseup = function(){
mouseFlag=false;
};
function mudaCores(){
corAtual=corAtual+1;
if(corAtual>= cores.length){
corAtual=0;
}
return false;
}
