Sei que é possível espelhar horizontalmente uma <img>
com CSS, mas
queria saber se é possível espelhar horizontalmente uma imagem dentro de um canvas
.
ExemploCom 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>
Como eu posso fazer isso?