JSFiddle - React, Tailwind, and code Playground

by Ivan Vasilyev

HTML

<canvas width="480" height="320"></canvas>
<img src="http://i.imgur.com/PWSOy.jpg" id="background" />

CSS

#background {
    display: none;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

ctx.drawImage(background, 0, 0);
ctx.beginPath();
// outer border
ctx.moveTo(0, 0);
ctx.lineTo(480, 0);
ctx.lineTo(480, 320);
ctx.lineTo(0, 320);
ctx.lineTo(0, 0);
// inner border
ctx.moveTo(50, 50);
ctx.lineTo(430, 50);
ctx.lineTo(430, 270);
ctx.lineTo(50, 270);
ctx.lineTo(50, 50);

ctx.fillStyle = 'rgba(0,0,0,0.8)';
// fills space between outer and inner border due to 'evenodd' param
ctx.fill('evenodd');
ctx.closePath();

ctx.strokeStyle = "#339900";
ctx.lineWidth = 6;
ctx.strokeRect(50, 50, 380, 220);