JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");
var image = new Image();
image.src = "http://wac.450f.edgecastcdn.net/80450F/hudsonvalleycountry.com/files/2015/01/cat4.jpg";
image.onload = function () {
    ctx.drawImage(image, 0, 0);
}


setTimeout(function () {
	ctx.fillStyle="#FFF";
    ctx.fillRect(0,0,c.width,c.height);

    // translate context to center of canvas
    ctx.translate(c.width, 0);
    // flip context horizontally
    ctx.scale(-1, 1);

    ctx.drawImage(image, 0, 0);

}, 1000)