polygons

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

function polygon($, n, x, y, r, angle, counter) {
  angle = angle || 0
  counter = counter || false
  $.moveTo(x + r * Math.sin(angle),
    y - r * Math.cos(angle))
  let delta = 2 * Math.PI / n
  for (let i = 1; i < n; i++) {
    angle += counter ? -delta : delta
    $.lineTo(x + r * Math.sin(angle),
      y - r * Math.cos(angle))
  }
  $.closePath()
}

$.beginPath()
polygon($, 3, 75, 70, 60)
polygon($, 4, 225, 60, 60, Math.PI / 4)
polygon($, 5, 75, 225, 60)
polygon($, 6, 225, 223, 60, Math.PI / 6)

$.fillStyle = '#ddd'
$.strokeStyle = '#222'
$.lineWidth = 4

$.fill()
$.stroke()