Segue o exercicio com os modificadores para aumento do pincel. HTML ``` <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <

Desenhando na tela com modificador | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Segue o exercicio com os modificadores para aumento do pincel.

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>

const tela = document.querySelector("#tela");
const pincel = tela.getContext("2d");
pincel.fillStyle="lightgray";
pincel.fillRect(0,0,600,400);

let corAtual = 0;
const cores=["blue","red","green","orange","white"];

function desenhaCirculo(evento){
    const posX = evento.pageX - tela.offsetLeft;
    const posY = evento.pageY - tela.offsetTop;
    pincel.fillStyle=cores[corAtual];
    pincel.beginPath();

    if(evento.shiftKey){
        pincel.arc(posX,posY,20,0,2*Math.PI);    
    }else if(evento.ctrlKey){
        pincel.arc(posX,posY,30,0,2*Math.PI);
    }else{
        pincel.arc(posX,posY,10,0,2*Math.PI);
    }
    pincel.fill();
}

tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCores;

function mudaCores(){
    corAtual=corAtual+1;
    if(corAtual>= cores.length){
        corAtual=0;
    }
    return false;
}

Tela exemplo Insira aqui a descrição dessa imagem para ajudar na acessibilidade