JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500" id="myCanvas"></canvas>

CSS

canvas {
    border: solid 1px grey;
}

JavaScript

function makeCanvas(id) {
	// --- Rudimentary canvas library just for drawing lines
	var canvas = document.getElementById(id),
		context = canvas.getContext('2d');
	function polyline(points) {
		var i;
		context.moveTo(points[0].x, points[0].y);
		for (i = 1; i < points.length; i++) {
			context.lineTo(points[i].x, points[i].y);
		}
		context.stroke();
	}
	return {polyline: polyline};
}
function P(x, y) {
    return {x: x, y: y}
}
function getParallelSegment(A, B, d, side) {
    // --- Return a line segment parallel to AB, d pixels away
	var dx = A.x - B.x,
		dy = A.y - B.y,
        dist = Math.sqrt(dx*dx + dy*dy) / 2;
	side = side || 1;
    dx *= side * d / dist;
	dy *= side * d / dist;
	return [P(A.x + dy, A.y - dx), P(B.x + dy, B.y - dx)];
}

var canvas = makeCanvas('myCanvas'), 
	line = [P(100, 400), P(200, 300), P(300, 300), P(300, 200), P(400, 200), P(400, 300)], i;
canvas.polyline(line);
for (i = 0; i < line.length - 1; i++) {
    canvas.polyline(getParallelSegment(line[i], line[i + 1], 10, -1));
}