JSFiddle - React, Tailwind, and code Playground

by Богдан Пирожок

HTML

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

JavaScript

var canvas = document.getElementById('hexagon'),
	ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 200;

var size = 60,
	angle = 0,
	center_x = 60,
	center_y = 60;

ctx.strokeStyle = "#000";
ctx.fillStyle = "#000";

for (var i = 0; i <= 6; i++) {
    angle = (2 * Math.PI) / 6 * (i + 0.5); 

    x_i = center_x + size / 2 * Math.cos(angle);
    y_i = center_y + size / 2 * Math.sin(angle);

  	if (i == 0) {
        ctx.moveTo(x_i, y_i);
  	} else {
  		ctx.lineTo(x_i, y_i);
  	}
}
ctx.stroke();