JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="joker" width="123" height="380"></canvas>
    
<img src="http://i.istockimg.com/file_thumbview_approve/7625283/2/stock-illustration-7625283-joker-face-two-playing-card.jpg"/>

CSS

#joker{
    border:1px solid black;
}

JavaScript

var c = document.getElementById("joker");
var ctx = c.getContext("2d");
var img = document.createElement('img');
img.src = 'http://i.istockimg.com/file_thumbview_approve/7625283/2/stock-illustration-7625283-joker-face-two-playing-card.jpg';
//$(document.body).append(img);


var b = false;
$(c).click(function(){
    if (b) {
        ctx.drawImage(img, -246, 0, 246, 380);
    } else {
        ctx.drawImage(img, 0, 0, 246, 380);
    }
    
    b = !b;
    ctx.scale(-1, 1);
}).click();