JSFiddle - React, Tailwind, and code Playground

by gauravsingh

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var cw = 700;
var ch = 438;

var img = new Image();
img.onload = start;
img.src = "https://thejournal.com/-/media/EDU/THEJournal/Images/2015/02/20150224test644.jpg";

function start() {
    canvas.width = cw;
    canvas.height = ch;

    // draw the image on the canvas
    ctx.drawImage(img, 0, 0, cw, ch);

    // darken the image with a 50% black fill
    ctx.save();
    ctx.globalAlpha = .50;
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, cw, ch);
    ctx.restore();

    // ctx.clip() the area to highlight
    // and redraw the whole image
    // (the image will draw only in the clipping region)
    ctx.save();
    ctx.beginPath();
    ctx.clearRect(300, 100, 200, 100);
    ctx.rect(300, 100, 200, 100);
    ctx.clip();
    ctx.drawImage(img, 0, 0, cw, ch);
    ctx.restore();

}