JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Left: original img element<br>Right: canvas element</h4>
<img id=theImg src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png">
<canvas id="myCanvas2" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
img{border:1px solid blue;}
canvas{border:1px solid red;}

JavaScript

var img=document.getElementById("theImg");
var iw=img.width;
var ih=img.height;
var canvas2=document.getElementById('myCanvas2');
var context2=canvas2.getContext('2d');
canvas2.width=iw;
canvas2.height=ih;
context2.save();
context2.translate(iw,0);
context2.scale(-1,1);
context2.drawImage(img,0,0);
context2.restore();