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

function draw(data) {
    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';

    var y = [20,50,100];
    for(var key in data) {
        var x = data[key].x;
        ctx.fillStyle = data[key].color;
        for(var i = 0; i < x.length; ++i) {
            ctx.beginPath();
            ctx.arc(x[i], y[i], radius, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.closePath();
        }
        
        ctx.beginPath();
        ctx.moveTo(x[0], y[0]);
        ctx.lineTo(x[1], y[1]);
        ctx.lineTo(x[2], y[2]);
        ctx.strokeStyle = data[key].color;
        ctx.stroke();
        ctx.closePath();
    }
}

draw({
    red:  { color: "#E51919", x: [20,149,50] },
    blue: { color: "#133175", x: [80,179,20] }
});