레이더 차트

const canvas = document.getElementById("radarChart");
const ctx = canvas.getContext("2d");

const SIZE = 320;
const MAX_LEVEL = 3;
const CENTER = SIZE / 2;
const STRIDE = CENTER / MAX_LEVEL;

const LEVELS = [3, 2, 1, 3];

const LINE_COLOR = "rgba(0,255,0,.8)";
const CHART_COLOR = "rgba(0,255,0,.6)";

canvas.width = canvas.height = SIZE;

// base
ctx.strokeStyle = LINE_COLOR;

for(let i = 1; i < MAX_LEVEL + 1; i++) {
  ctx.beginPath();
  ctx.moveTo(CENTER, (MAX_LEVEL-i) * STRIDE);
  ctx.lineTo(CENTER + STRIDE * i, CENTER);
  ctx.lineTo(CENTER, CENTER + STRIDE * i);
  ctx.lineTo((MAX_LEVEL-i) * STRIDE, CENTER);
  ctx.closePath();
  ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(CENTER, 0);
ctx.lineTo(CENTER, SIZE);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(0, CENTER);
ctx.lineTo(SIZE, CENTER);
ctx.closePath();
ctx.stroke();

// chart
ctx.fillStyle = CHART_COLOR;
ctx.beginPath();
ctx.moveTo(CENTER, (MAX_LEVEL-LEVELS[0]) * STRIDE);
ctx.lineTo(CENTER + STRIDE * LEVELS[1], CENTER);
ctx.lineTo(CENTER, CENTER + STRIDE * LEVELS[2]);
ctx.lineTo((MAX_LEVEL-LEVELS[3]) * STRIDE, CENTER);
ctx.closePath();
ctx.fill();