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

Dúvida no Ex. 3 da Aula 4 - CANVAS

Meu código abaixo não funciona. Fiz a lógica exatamente como ensinaram, mas sem sucesso. Preciso que ele funcione para então depois de ter entendido finalizar as etapas do ex.3 aula 4:

<canvas id="canvas1" width="800" height="800"></canvas>

<script>

    var canvas = document.getElementById("canvas1");
    var c = canvas.getContext("2d");

    c.fillStyle = "gray";
    c.fillRect(0, 0, 800, 800);

    c.onclick = function(mouseEvent) {
        var axisX = mouseEvent.pageX;
        var axisY = mouseEvent.pageY;
        context.fillStyle = "blue";
        context.beginPath();
        context.arc(axisX, axisY, 25, 0, 2*Math.PI);
        context.fill();
    }

</script>
2 respostas

Olá Thiago! Tentei entender seu código e pelo que entendi você deseja que seja desenhada um circulo azul a cada click que seja dado. Se for isso então seu código contem alguns erros. O primeiro é que você está colocando o evento click no elemento errado, ele deveria estar no canvas e a partir dele você realizar as demais ações utilizando o c e não context.

Seu código ficaria assim:

<canvas id="canvas1" width="800" height="800"></canvas>

<script>

    var canvas = document.getElementById("canvas1");
    var c = canvas.getContext("2d");

    c.fillStyle = "gray";
    c.fillRect(0, 0, 800, 800);

    canvas.onclick = function(mouseEvent) {
        var axisX = mouseEvent.pageX;
        var axisY = mouseEvent.pageY;
        c.fillStyle = "blue";
        c.beginPath();
        c.arc(axisX, axisY, 25, 0, 2*Math.PI);
        c.fill();
    }

</script>
solução!

Obrigado pela ajuda, era isso mesmo o erro! Tentei chamar o método onclick dentro do getContext. Na verdade ele só existe dentro do retorno do getElementById();

Foi muito confuso esse curso de lógica com canvas.