Desafio do André - Bolinhas coloridas aleatoriamente. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

O André Victor propôs um exercício para que eu treinasse mais um pouco. A ideia era gerar bolinhas coloridas aleatoriamente com todas as cores possíveis. Como sempre, dei aquela pesquisada e aprendi bastante com esse desafio. Abaixo segue o código que fiz. Para quem quiser entender ou aprender um pouco sobre as cores digitais e como sua matemática e padrões funcionam, vou deixar o link aqui de um site. Vale a leitura.

abs : )

https://dicasdeprogramacao.com.br/as-10-conversoes-numericas-mais-utilizadas-na-computacao/

<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 = "white";
        brush.fillRect(0, 0, 600, 400);
        brush.fillStroke = "black";
        brush.strokeRect(0, 0, 600, 400);

        function toDrawColorfulBalls(event) {

            let x = event.pageX - screen.offsetLeft;
            let y = event.pageY - screen.offsetTop;

            let hexadecimal = "0123456789ABCDEF";
            let color = "#";

            for(let i = 0; i < 6; i++) {

                color = color + hexadecimal[Math.floor(Math.random() * 16)];
            }

            brush.fillStyle = color;
            brush.beginPath();
            brush.arc(x, y, 10, 0, 2 * 3.14);
            brush.fill();
            console.log(color);

            return false;
        }

        screen.oncontextmenu = toDrawColorfulBalls;
        screen.onclick = toDrawColorfulBalls;

    </script>    
</body>
</html>