JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas id='canvas'></canvas>

CSS

html,body,canvas{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    border:0px;
}

JavaScript

var hex = [],length = 25,rotation = 0,offset = [200,200];
for(var i = 0;i<Math.PI*2-.01;i+=Math.PI/3){
    hex.push((i+rotation));
}
hex = hex.map(function(e){return [Math.round(Math.sin(e)*length)+offset[0],Math.round(Math.cos(e)*length)+offset[1]]});
console.log(hex.join());
var c = document.getElementById('canvas');
var cs = getComputedStyle(c);
c.width = parseFloat(cs.width);
c.height = parseFloat(cs.height);
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(hex[0][0],hex[0][1]);
hex.forEach(function(e){
ctx.lineTo(e[0],e[1]);
});
ctx.closePath();
ctx.stroke();