JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canvas-wrap">
	<canvas id="myCanvas" width="200" height="115"></canvas>
</div>

CSS

body {
		margin: 0;
		padding: 40px 0 0;
		background: #efefef;
	}
	.canvas-wrap {
		background: #fff;
		margin: 0 auto;
		width: 200px;
		height: auto;
	}

JavaScript

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
		
	// set attributes for all circles
	var radius = 7;

	// set attributes for all lines
	ctx.lineWidth = 5;
	ctx.lineJoin = 'round';

	// set X co-ords for Red
	var r01x = 20;
	var r02x = 149;
	var r03x = 50;

	// set X co-ords for Blue
	var b01x = 80;
	var b02x = 179;
	var b03x = 20;

	// Set default Y coordinates for both Red and Blue
	var y01 = 20;
	var y02 = 50;
	var y03 = 100;

	// RED dots
	ctx.beginPath();
	ctx.fillStyle = "#E51919";
	ctx.arc(r01x, y01, radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "#E51919";
	ctx.arc(r02x, y02, radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "#E51919";
	ctx.arc(r03x, y03, radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();

	// RED line
	ctx.beginPath();
	ctx.moveTo(r01x, y01);
	ctx.lineTo(r02x, y02);
	ctx.lineTo(r03x, y03);     
	ctx.strokeStyle = "#E51919";
	ctx.stroke();
	ctx.closePath();

	// BLUE dots
	ctx.beginPath();
	ctx.fillStyle = "#133175";
	ctx.arc(b01x, y01, radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "#133175";
	ctx.arc(b02x, y02, radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "#133175";
	ctx.arc(b03x, y03, radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();

	// BLUE line
	ctx.beginPath();
	ctx.moveTo(b01x, y01);
	ctx.lineTo(b02x, y02);
	ctx.lineTo(b03x, y03);     
	ctx.strokeStyle = "#133175";
	ctx.stroke();
	ctx.closePath();