Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
12
respostas

Right Click and options image

Pessoal, eu nao sei como tratar quando temos o painel de opçoes de imagens na pagina, como trato isso, para que ele responda ao evento mesmo ?

<html>
<head>
    <h2>Canvas</h2>
</head>
    <body>
        <canvas id="screen" width="600" height="400"></canvas>
    </body>
    <script>
        var screen = document.getElementById("screen");
        var c = screen.getContext("2d");

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

        var circle = function(x,y){
            c.fillStyle="blue";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        var circleRed = function(x,y){
            c.fillStyle="red";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        screen.onclick = function(event) {
            var x = event.pageX - screen.offsetLeft;
            var y = event.pageY - screen.offsetTop;
            var z = event.which;
            console.log(z);

            if(z==3){
                circleRed(x,y);
            } else {
                circle(x,y);
            }
            console.log("X " + x + "  Y " + y);
        }
    </script>
</html>
12 respostas
solução!

Para o botão direito use o:

screen.oncontextmenu = function(){}

Eduardo conseguiu sanar sua dúvida com a resposta do nosso amigo Felipe ?

Pessoal, bom dia. Utilizando o código abaixo, conforme explicado na resposta do exercício, eu continuo tendo ao clicar com o botão direito o menu.

Alguém pode me ajudar?

Nauro, seu código não apareceu, consegue postar ele de novo?

<canvas id="tela" width="600" height="400"></canvas>

<script type="text/javascript">

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

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

tela.onclick = function(evento) {
    //calculando a posição do mouse e descontando a borda do navegador
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * 3.14);
    c.fill();

    //exibe no console a posição do click do mouse
    console.log( x, y);
}

tela.oncontextmenu = function (evento) {
    evento.preventDefault();
    var w = evento.pageX - tela.offsetLeft;
    var z = evento.pageY - tela.offsetTop;

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * 3.14);
    c.fill();

    //exibe no console a posição do click do mouse
    console.log(w, z);

};
</script>

Nauro, na hora de usar a função arc você usou x e y como parâmetros mas não os definiu dentro do escopo da segunda função, você usou o W e o Z para pegar o X e Y, tente mudar o seguinte:

 c.arc(x, y, 10, 0, 2 * 3.14);

por

c.arc(w, z, 10, 0, 2 * 3.14);

Felipe, realmente era um problema com as variáveis. Fiz para não confundir com as variáveis da 1ª função e acabei esquecendo de alterar quando reaproveitei o código na segunda. Muito obrigado pela ajuda, agora funcionou perfeitamente. Abs!

Obrigado gente, irei testar a solução do felipe, eu havia tomado outro caminho como alternativa

Nao consegui fazer a captura do direito, ele abra a caixa de opções como se fosse uma imagem.

<html>
<head>
    <h2>Canvas</h2>
</head>
    <body>
        <canvas id="screen" width="600" height="400"></canvas>
    </body>
    <script>
        var screen = document.getElementById("screen");
        var c = screen.getContext("2d");

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

        var circle = function(x,y){
            c.fillStyle="blue";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        var circleRed = function(x,y){
            c.fillStyle="red";
            c.beginPath();
            c.arc(x, y, 10, 0, 2*3.14);
            c.fill();
        }

        screen.onclick = function(event) {
            event.preventDefault();
            var x = event.pageX - screen.offsetLeft;
            var y = event.pageY - screen.offsetTop;
            var z = event.which;
            console.log(z);

            if(z==3){
                circleRed(x,y);
            } else {
                circle(x,y);
            }
            console.log("X " + x + "  Y " + y);
        }

    </script>
</html>

Opa, usei oncontextmenu e funcionou perfeitamente.