Skip to main content
Tweeted twitter.com/StackOverflowPT/status/992213694775005184
adicionou 395 caracteres ao conteúdo
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

É possível espelhar uma imagem horizontalmente (flip) com Canvas?

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?

É possível espelhar uma imagem horizontalmente com Canvas?

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

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.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?

É possível espelhar uma imagem horizontalmente (flip) com Canvas?

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>

Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

É possível espelhar uma imagem horizontalmente com Canvas?

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

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.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?