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);