JSFiddle - React, Tailwind, and code Playground

by joquery

HTML

<canvas id="myCanvas"></canvas>
<canvas id="imgCache"></canvas>
<img id="logo" src="http://jsfiddle.net/img/logo.png"/>

CSS

#myCanvas {
    background-color: red;
    width: 200px;
    height: 100px;
}

#imgCache {
    background-color: lime;
    width: 200px;
    height: 100px;
}

JavaScript

var canvas = jQuery("#myCanvas")[0];
var context = canvas.getContext("2d");

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

var imgCache = jQuery("#imgCache")[0];
var imgCacheContext = imgCache.getContext("2d");

var img = document.getElementById("logo");


    
    imgCacheContext.fillStyle = "magenta";
    imgCacheContext.fillRect(0, 0, imgCache.width, imgCache.height);
    imgCacheContext.drawImage(this, 0,0,imgCache.width,imgCache.height);
    
    var imgData = imgCacheContext.getImageData(0, 0, imgCache.width, imgCache.height);
    
    context.putImageData(imgData, 0, 0);