JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<canvas id="canvas" width=250 height=250 ></canvas>

CSS

canvas {
  border: 2px solid grey;
}

JavaScript

var polygon= [
				{"x1": 100, "y1": 100, "x2": 120, "y2": 100},
				{"x1": 120, "y1": 100, "x2": 120, "y2": 200},
				{"x1": 120, "y1": 200, "x2": 100, "y2": 200},
				{"x1": 100, "y1": 200, "x2": 100, "y2": 100}
			]
      
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

ctx.fillStyle = 'red'
ctx.beginPath()

for (var i in polygon) {
	//ctx.moveTo(polygon[i].x1, polygon[i].y1)
  ctx.lineTo(polygon[i].x2, polygon[i].y2);
}

ctx.fill()