JSFiddle - React, Tailwind, and code Playground

by gauravsingh

HTML

<canvas id='canvas'>Your browswer does not support HTML5 canvas</canvas>
<canvas id='canvas2'>Your browswer does not support HTML5 canvas</canvas>

CSS

#canvas {
    width:700px;
    height:438px;
}

#canvas2 {
    width:700px;
    height:438px;
    z-index: 9999;
}

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function () {
    canvas.width=700;
    canvas.height=500;
    context.drawImage(imageObj, 0, 0, 700, 438);
    context.fillStyle = "rgba(0, 0, 0, 0.4)";
    context.fillRect(0, 0, 700, 438);
};
imageObj.src = 'https://thejournal.com/-/media/EDU/THEJournal/Images/2015/02/20150224test644.jpg';

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var imageObj2 = new Image();
imageObj2.onload = function () {
    canvas2.width=500;
    canvas2.height=438;
    context.drawImage(imageObj2, 300, 100, 200, 100);
};
imageObj2.src = 'http://i.imgur.com/PawQS04.jpg';