Fala rapazeada, tudo bem? Segue a solução que encontrei. Depois de ter chegado ao resultado, olhei a resposta do professor e vi que a idéia é a mesma, porém de uma forma diferente.
Obs 1: sempre começo programar iniciando com DOCTYPE etc, uso "meta charset" etc, mesmo que não tenha texto, puramente para fixar sempre na minha cabeça todo o conteúdo.
Obs 2: resolvi tentar escrever tudo em inglês, pois essa mistura de português com inglês está me incomodando. : ) Não sei se é frescura ou não, mas é isso. kkkk
grande abraço!
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colorful Balls</title>
<link rel="icon" href="icon.png">
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
let screen = document.querySelector("canvas");
let brush = screen.getContext("2d");
brush.fillStyle = "gray";
brush.fillRect(0, 0, 600, 400);
let color = ["blue", "red", "green"]
let colorPosition = 0;
function toDrawColorfulBalls(event) {
let x = event.pageX - screen.offsetLeft;
let y = event.pageY - screen.offsetTop;
if(colorPosition > 2) {
colorPosition = 0;
}
brush.fillStyle = color[colorPosition];
colorPosition++;
brush.beginPath();
brush.arc(x, y, 10, 0, 2 * 3.14);
brush.fill()
return false;
}
screen.oncontextmenu = toDrawColorfulBalls;
screen.onclick = toDrawColorfulBalls;
</script>
</body>
</html> 
