5

Sei que é possível espelhar horizontalmente uma <img> com CSS, mas queria saber se é possível espelhar horizontalmente uma imagem dentro de um canvas.

Com CSS, eu faria assim:

#img-flip{
   transform: scaleX(-1);
}
    <img src="https://i.sstatic.net/pA0a1.png" id="img">
        <img src="https://i.sstatic.net/pA0a1.png" id="img-flip">

E com canvas? Como eu posso fazer isso?

var onload = function() {
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("#img");
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
}


img.completed ? onload() : img.addEventListener('load', onload);
<div>Imagem original:</div>
<img src="https://i.sstatic.net/pA0a1.png" id="img">

<div>Resultado Canvas:</div>
<canvas id="canvas"></canvas>

3 Respostas 3

4

Você pode utilizar o context.scale(-1, 1); e passar como parâmetro o width da imagem vezes -1 ao realizar o drawImage() do contexto.

var onload = function() {
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("#img");
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.scale(-1, 1);
    ctx.drawImage(img, 0, 0, img.width*-1, img.height);
}


img.completed ? onload() : img.addEventListener('load', onload);
<div>Imagem original:</div>
<img src="https://i.sstatic.net/pA0a1.png" id="img">

<div>Resultado Canvas:</div>
<canvas id="canvas"></canvas>

Referência HTML Canvas: How to draw a flipped/mirrored image?

3
  • 3
    Belo e moral. +1 Commented 3/05/2018 às 19:26
  • @WallaceMaxters Obrigado! Estamos aqui pra isso! :)
    – bio
    Commented 3/05/2018 às 19:34
  • 3
    Só pra constar img.width*-1 seria o mesmo que fazer -img.width, ou seja a operação de multiplicação não é tão necessária neste uso.
    – Syzoth
    Commented 3/05/2018 às 19:58
2

Recomendo usar o CanvasRenderingContext2D.translate() junto com o CanvasRenderingContext2D.scale(), pois se usar apenas CanvasRenderingContext2D.scale() ele irá afetar o canvas todo, possivelmente deixando objetos fora do quadro (se a ideia for espelhar um canvas com mais de um elemento em diferentes posições), não sendo um espelhamento preciso, e isso lhe obrigaria a ficar ajustando drawImage por drawImage (supondo que vá usar mais de um) e outros elementos adicionados também que deveriam aparecer invertidos.

Exemplo do problema do scale negativo (note que o rect não esta na posição x=20):

var onload = function() {
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("#img");
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.scale(-1, 1);
    ctx.drawImage(img, 0, 0, img.width*-1, img.height);

    ctx.rect(20, 20, 100, 100);
    ctx.stroke();
}

img.completed ? onload() : img.addEventListener('load', onload);
<div>Imagem original:</div>
<img src="https://i.sstatic.net/pA0a1.png" id="img">

<div>Resultado Canvas:</div>
<canvas id="canvas"></canvas>

Então para "corrigir" isso, para que a posição x=20 no rect não fique invertida em relação ao tamanho do canvas (<canvas width="...) teríamos que compensar fazendo um calculo, exemplo:

ctx.rect(-(img.width - 100 - 20), 20, 100, 100);

Ou seja, temos que somar a largura do rect com a posição desejada e transformar o valor em negativo, exemplo:

var onload = function() {
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("#img");
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.scale(-1, 1);

    ctx.drawImage(img, 0, 0, -img.width, img.height);
    ctx.rect(-(img.width - 100 - 20), 20, 100, 100);
    ctx.strokeStyle = "red";
    ctx.stroke();
}

img.completed ? onload() : img.addEventListener('load', onload);
<div>Imagem original:</div>
<img src="https://i.sstatic.net/pA0a1.png" id="img">

<div>Resultado Canvas:</div>
<canvas id="canvas"></canvas>


Usando translate

No entanto ficar fazendo cálculos para cada situação pode ser custoso, até mesmo para o tempo de desenvolvimento, e com certeza você pode simplificar essa tarefa usando o CanvasRenderingContext2D.translate(), apenas assim ctx.scale(-1, 1);, para qualquer objeto. Se deseja espelhar na horizontal:

ctx.translate(-canvas.width, 0);

Se deseja espelhar na vertical:

ctx.translate(0, -canvas.height);

Exemplo de uso:

var onload = function() {
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("#img");
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.scale(-1, 1);
    ctx.translate(-canvas.width, 0);
    ctx.drawImage(img, 0, 0, img.width, img.height);

    ctx.rect(20, 20, 100, 100);
    ctx.stroke();
}

img.completed ? onload() : img.addEventListener('load', onload);
<div>Imagem original:</div>
<img src="https://i.sstatic.net/pA0a1.png" id="img">

<div>Resultado Canvas:</div>
<canvas id="canvas"></canvas>

Pronto, desta forma não precisa ficar calculando nada, você pode aplicar mais de um objeto ou imagem ao canvas que ele vai desenhar como se fosse um espelho sem precisar de ajustes, o mesmo pode ser feito com o eixo Y, se deseja inverter na vertical ficaria assim:

ctx.scale(1, -1);
ctx.translate(0, -canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
-3

<!DOCTYPE html>
<html>
<head>
    <title>teste com canvas</title>
    
</head>
    
<body>

    <canvas id = "tela" width = "600" height = "500"></canvas>
</body>
</html>
<script>

var cnv = document.getElementById('tela');
var ctx = cnv.getContext('2d');

var flipY = 1;//mude o valor de 1 para -1 para virar o sprite em y//
var flipX = 1;//mude o valor de 1 para -1 para virar o sprite em x//

var nave = new Image();
var cores = new Image();

nave.src = "https://i.sstatic.net/VzSK8.png";
cores.src = "https://i.sstatic.net/ySTaH.png";
nave.addEventListener("load",draw);


function draw(){
    //56-Largura//
    ctx.save();
    ctx.scale(flipX,flipY);

    ctx.clearRect(0,0,cnv.width*flipX,cnv.height*flipY);
    ctx.drawImage(nave,0,0,200*flipX,200*flipY);
    ctx.restore();

    ctx.drawImage(cores,320,0,160,100,400,340,56,100);
    requestAnimationFrame(draw);
}
</script>
<style>
    #tela{
    border:1px solid black;
    position:absolute;
    left:340px;
    top:50px;
</style>

1
  • 3
    Testa esse codigo, a questão aqui é que usar scale altera o canvas inteiro se você não usar o ctx.save e ctx.restore. tem duas images em uma você consegue virar a nave mudando os eixos, enquanto outra das cores não é virada no processo. Commented 3/09/2022 às 14:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .