JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = 'rgba(0,0,0,.5)';
    ctx.fillRect(0,0,500,500);   
}

img.src = 'http://www.crystalgears.com/isoengine/sprites-ground.png'