Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

O onclick não está funcionando![SOLUCIONADO]

<canvas width=600 height=400></canvas>
        <script>
        var screen = document.querySelector('canvas');
        var brush = screen.getContext('2d');
        brush.fillStyle='grey';
        brush.fillRect(0,0,600,400);
        function drawCircle(x,y,raio) {
                brush.fillStyle='blue';
                brush.beginPath();
                brush.arc(x,y,raio,0,2*3.14);
                brush.fill();}
        screen.onclick=drawCircle;
        </script>

O onclick não funciona.

2 respostas
solução!

Bom dia Lucas, beleza?

Encontrei 2 possíveis erros no seu código, que são:

<canvas width=600 height=400></canvas>
        <script>
        var screen = document.querySelector('canvas');
        var brush = screen.getContext('2d');
        brush.fillStyle='grey';
        brush.fillRect(0,0,600,400);
        function drawCircle(x,y,raio) {
                **"aqui faltou as variáveis"**
                brush.fillStyle='blue';
                brush.beginPath();
                **brush.arc(x,y,raio,0,2*3.14);**
                brush.fill();}
        screen.onclick=drawCircle;
        </script>

Segue seu código com a possível resolução:

<canvas width=600 height=400></canvas>

        <script>

        var screen = document.querySelector('canvas');
        var brush = screen.getContext('2d');

        brush.fillStyle='grey';
        brush.fillRect(0,0,600,400);

        function drawCircle(x,y,raio) {
                **var x = event.pageX - screen.offsetLeft;
                var y = event.pageY - screen.offsetTop;**
                brush.fillStyle='blue';
                brush.beginPath();
                **brush.arc(x,y,5,0,2*3.14);**
                brush.fill();
        }
        screen.onclick = drawCircle;
        </script>

Perceba que você esqueceu de especificar o raio, ou seja, sua bolinha sempre teria 0 de tamanho!

Muito obrigado, Gabriel.