JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can2" width="300" height="150"></canvas>
<canvas id="can3" width="300" height="150"></canvas>
<canvas id="can1" width="300" height="150"></canvas>

CSS

canvas {
  image-rendering: pixelated;
}

JavaScript

let strokeWidth = 9;

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

let s = new Path2D();
let f = new Path2D();

s.rect(0, 0, 150, 100);
f.rect(0 + strokeWidth, 0 + strokeWidth, 150 - strokeWidth * 2, 100 - strokeWidth * 2);

ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.moveTo(75 + 0.5, 0);
ctx.lineTo(75 + 0.5, 100);
ctx.stroke();

ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fill(f);

ctx.fillStyle = "rgba(0,0,255,0.5)";
s.addPath(f);
ctx.fill(s, 'evenodd');


var c2 = document.getElementById("can2");
var ctx2 = c2.getContext("2d");

ctx2.strokeStyle = 'black';
ctx2.lineWidth = 1;
ctx2.moveTo(75 + 0.5, 0);
ctx2.lineTo(75 + 0.5, 100);
ctx2.stroke();

let s2 = new Path2D();

s2.rect(0, 0, 150, 100);

ctx2.lineWidth = strokeWidth;
ctx2.fillStyle = "rgba(255,0,0,0.5)";
ctx2.fill(s2);

ctx2.strokeStyle = "rgba(0,0,255,0.5)";
ctx2.stroke(s2);


var c3 = document.getElementById("can3");
var ctx3 = c3.getContext("2d");

ctx3.strokeStyle = 'black';
ctx3.lineWidth = 1;
ctx3.moveTo(75 + 0.5, 0);
ctx3.lineTo(75 + 0.5, 100);
ctx3.stroke();

let s3 = new Path2D();

s3.rect(0 + strokeWidth / 2, 0 + strokeWidth / 2, 150 - strokeWidth, 100 - strokeWidth);

ctx3.lineWidth = strokeWidth;
ctx3.fillStyle = "rgba(255,0,0,0.5)";
ctx3.fill(s3);

ctx3.strokeStyle = "rgba(0,0,255,0.5)";
ctx3.stroke(s3);