JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="test">
		
</canvas>

CSS

html, body {
		width: 100%;
		height: 100%;
		overflow: hidden;
}
canvas#test {
		width: 300px;
		height: 300px;
		margin: 0 auto;
		display: block;
}

JavaScript

var canvas 	= document.getElementById("test")
		,	ctx		= canvas.getContext("2d");
		
		var points = "8,8,10,10,30,30,49,10";
		
		function parsePoints() {
			
			var exCoords = points.split(",")
						
			var coords = [];
			for(var i = 0; i < exCoords.length; i += 2) {
				coords.push({x: exCoords[i], y: exCoords[(i + 1)]});
			}
							
			return coords;
			
		}
		
		
		var coords = parsePoints();
		
		for(var i = 0; i < coords.length; i += 1) {
			if(coords[(i + 1)] != undefined) {
				ctx.beginPath();
				ctx.moveTo(coords[i].x, coords[i].y);
				ctx.lineTo(coords[(i + 1)].x, coords[(i + 1)].y);
				ctx.stroke();
			} else {
				ctx.beginPath();
				ctx.moveTo(coords[i].x, coords[i].y);
				ctx.lineTo(coords[0].x, coords[0].y);
				ctx.stroke();
			}
		}