Uma sugestão adicional a resposta já existente, seria usar o context.translate
para ajustar o canvas todo ao invés de fixar na imagem a posição X
, isto porque ao usar o context.scale
ele afeta o canvas todo, então teria que ficar ajustando drawImage
por drawImage
(supondo que vá usar mais de um) e outros elementos adicionados também que deveriam aparecer invertidos.
Exemplo da dificuldade (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.stack.imgur.com/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 algo como:
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.stack.imgur.com/pA0a1.png" id="img">
<div>Resultado Canvas:</div>
<canvas id="canvas"></canvas>
Usando translate
No entanto isso pode ser complicado, custoso até para o tempo de desenvolvimento e com certeza é algo que pode ser simplificado usando o translate
, 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.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.stack.imgur.com/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);