@thi.ng/hiccup-canvas/polygon.js

Hiccup shape tree renderer for vanilla Canvas 2D contexts

import { __endShape } from "./internal/end-shape.js";
const polygon = (ctx, attribs, pts) => {
  if (pts.length < 2) return;
  __drawPoly(ctx, pts);
  ctx.closePath();
  __endShape(ctx, attribs);
};
const packedPolygon = (ctx, attribs, opts, pts) => {
  if (pts.length < 2) return;
  __drawPackedPoly(ctx, opts, pts);
  ctx.closePath();
  __endShape(ctx, attribs);
};
const __drawPoly = (ctx, pts) => {
  let p = pts[0];
  ctx.beginPath();
  ctx.moveTo(p[0], p[1]);
  for (let i = 1, n = pts.length; i < n; i++) {
    p = pts[i];
    ctx.lineTo(p[0], p[1]);
  }
};
const __drawPackedPoly = (ctx, opts, pts) => {
  const { start = 0, cstride = 1, estride = 2 } = opts;
  let num = opts?.num ?? (pts.length - start) / estride | 0;
  ctx.beginPath();
  ctx.moveTo(pts[start], pts[start + cstride]);
  for (let i = start + estride; num-- > 1; i += estride) {
    ctx.lineTo(pts[i], pts[i + cstride]);
  }
};
export {
  __drawPackedPoly,
  __drawPoly,
  packedPolygon,
  polygon
};