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'