JSFiddle - React, Tailwind, and code Playground

by Kajus

HTML

<canvas id="drawpolygon"></canvas>

JavaScript

var ctx = document.getElementById('drawpolygon').getContext('2d');

var sides = 10;

ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(0, 0);

var x_prev = 0;
var y_prev = 0;
for(var i=0;i<sides;i++)
{
  var x = getRandomInt(0, 100);
  var y = getRandomInt(0, 100);
	ctx.lineTo(x, y);
  
  x_prev = x;
  y_prev = y;
}
ctx.closePath();
ctx.fill();

// https://stackoverflow.com/a/1527820/1066234
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}