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

Hiccup shape tree renderer for vanilla Canvas 2D contexts

import { isString } from "@thi.ng/checks/is-string";
import { css } from "@thi.ng/color/css/css";
const resolveColor = css;
const resolveGradientOrColor = (state, v) => isString(v) ? v[0] === "$" ? state.grads[v.substring(1)] : v : resolveColor(v);
const defLinearGradient = (ctx, { from, to }, stops) => {
  const g = ctx.createLinearGradient(from[0], from[1], to[0], to[1]);
  for (const s of stops) {
    g.addColorStop(s[0], resolveColor(s[1]));
  }
  return g;
};
const defRadialGradient = (ctx, { from, to, r1, r2 }, stops) => {
  const g = ctx.createRadialGradient(from[0], from[1], r1, to[0], to[1], r2);
  for (const s of stops) {
    g.addColorStop(s[0], resolveColor(s[1]));
  }
  return g;
};
export {
  defLinearGradient,
  defRadialGradient,
  resolveColor,
  resolveGradientOrColor
};