@gjsify/canvas2d 0.1.0

package/lib/esm/canvas-state.js

@@ -0,0 +1,39 @@
+import { BLACK } from "./color.js";
+function createDefaultState() {
+  return {
+    fillStyle: "#000000",
+    fillColor: { ...BLACK },
+    strokeStyle: "#000000",
+    strokeColor: { ...BLACK },
+    lineWidth: 1,
+    lineCap: "butt",
+    lineJoin: "miter",
+    miterLimit: 10,
+    lineDash: [],
+    lineDashOffset: 0,
+    globalAlpha: 1,
+    globalCompositeOperation: "source-over",
+    shadowColor: "rgba(0, 0, 0, 0)",
+    shadowBlur: 0,
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    font: "10px sans-serif",
+    textAlign: "start",
+    textBaseline: "alphabetic",
+    direction: "ltr",
+    imageSmoothingEnabled: true,
+    imageSmoothingQuality: "low"
+  };
+}
+function cloneState(state) {
+  return {
+    ...state,
+    fillColor: { ...state.fillColor },
+    strokeColor: { ...state.strokeColor },
+    lineDash: [...state.lineDash]
+  };
+}
+export {
+  cloneState,
+  createDefaultState
+};

package/lib/esm/color.js

@@ -0,0 +1,209 @@
+const NAMED_COLORS = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32",
+  transparent: "#00000000"
+};
+function parseColor(color) {
+  if (!color || typeof color !== "string") return null;
+  const trimmed = color.trim().toLowerCase();
+  const named = NAMED_COLORS[trimmed];
+  if (named) return parseHex(named);
+  if (trimmed.startsWith("#")) return parseHex(trimmed);
+  const rgbMatch = trimmed.match(
+    /^rgba?\(\s*(\d+(?:\.\d+)?%?)\s*[,\s]\s*(\d+(?:\.\d+)?%?)\s*[,\s]\s*(\d+(?:\.\d+)?%?)\s*(?:[,/]\s*(\d+(?:\.\d+)?%?))?\s*\)$/
+  );
+  if (rgbMatch) {
+    return {
+      r: parseComponent(rgbMatch[1], 255) / 255,
+      g: parseComponent(rgbMatch[2], 255) / 255,
+      b: parseComponent(rgbMatch[3], 255) / 255,
+      a: rgbMatch[4] !== void 0 ? parseComponent(rgbMatch[4], 1) : 1
+    };
+  }
+  return null;
+}
+function parseHex(hex) {
+  const h = hex.slice(1);
+  let r, g, b, a = 1;
+  if (h.length === 3) {
+    r = parseInt(h[0] + h[0], 16) / 255;
+    g = parseInt(h[1] + h[1], 16) / 255;
+    b = parseInt(h[2] + h[2], 16) / 255;
+  } else if (h.length === 4) {
+    r = parseInt(h[0] + h[0], 16) / 255;
+    g = parseInt(h[1] + h[1], 16) / 255;
+    b = parseInt(h[2] + h[2], 16) / 255;
+    a = parseInt(h[3] + h[3], 16) / 255;
+  } else if (h.length === 6) {
+    r = parseInt(h.slice(0, 2), 16) / 255;
+    g = parseInt(h.slice(2, 4), 16) / 255;
+    b = parseInt(h.slice(4, 6), 16) / 255;
+  } else if (h.length === 8) {
+    r = parseInt(h.slice(0, 2), 16) / 255;
+    g = parseInt(h.slice(2, 4), 16) / 255;
+    b = parseInt(h.slice(4, 6), 16) / 255;
+    a = parseInt(h.slice(6, 8), 16) / 255;
+  } else {
+    return null;
+  }
+  return { r, g, b, a };
+}
+function parseComponent(value, max) {
+  if (value.endsWith("%")) {
+    return parseFloat(value) / 100 * max;
+  }
+  return parseFloat(value);
+}
+const BLACK = { r: 0, g: 0, b: 0, a: 1 };
+const TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
+export {
+  BLACK,
+  TRANSPARENT,
+  parseColor
+};

package/lib/esm/image-data.js

@@ -0,0 +1,22 @@
+class OurImageData {
+  constructor(swOrData, sh, maybeHeight) {
+    this.colorSpace = "srgb";
+    if (typeof swOrData === "number") {
+      this.width = swOrData;
+      this.height = sh;
+      this.data = new Uint8ClampedArray(this.width * this.height * 4);
+    } else {
+      this.data = swOrData;
+      this.width = sh;
+      this.height = maybeHeight ?? this.data.length / (4 * this.width);
+      if (this.data.length !== this.width * this.height * 4) {
+        throw new RangeError(
+          `Source data length ${this.data.length} is not a multiple of (4 * width=${this.width})`
+        );
+      }
+    }
+  }
+}
+export {
+  OurImageData
+};

package/lib/esm/index.js

@@ -0,0 +1,43 @@
+import { CanvasRenderingContext2D } from "./canvas-rendering-context-2d.js";
+import { CanvasGradient } from "./canvas-gradient.js";
+import { CanvasPattern } from "./canvas-pattern.js";
+import { Path2D } from "./canvas-path.js";
+import { OurImageData } from "./image-data.js";
+import { parseColor } from "./color.js";
+import { Canvas2DWidget } from "./canvas-drawing-area.js";
+import { HTMLCanvasElement as GjsifyHTMLCanvasElement } from "@gjsify/dom-elements";
+import { CanvasRenderingContext2D as CanvasRenderingContext2D2 } from "./canvas-rendering-context-2d.js";
+const CONTEXT_KEY = /* @__PURE__ */ Symbol.for("gjsify_canvas2d_context");
+GjsifyHTMLCanvasElement.registerContextFactory("2d", (canvas, options) => {
+  const existing = canvas[CONTEXT_KEY];
+  if (existing) return existing;
+  const ctx = new CanvasRenderingContext2D2(canvas, options);
+  canvas[CONTEXT_KEY] = ctx;
+  return ctx;
+});
+import { OurImageData as OurImageData2 } from "./image-data.js";
+import { Path2D as Path2D2 } from "./canvas-path.js";
+Object.defineProperty(globalThis, "CanvasRenderingContext2D", {
+  value: CanvasRenderingContext2D2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "ImageData", {
+  value: OurImageData2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "Path2D", {
+  value: Path2D2,
+  writable: true,
+  configurable: true
+});
+export {
+  Canvas2DWidget,
+  CanvasGradient,
+  CanvasPattern,
+  CanvasRenderingContext2D,
+  OurImageData as ImageData,
+  Path2D,
+  parseColor
+};

package/lib/types/cairo-utils.d.ts

@@ -0,0 +1,54 @@
+import type Cairo from 'cairo';
+/**
+ * Convert quadratic Bezier control point to cubic Bezier control points.
+ * Canvas 2D has quadraticCurveTo but Cairo only has cubic curveTo.
+ *
+ * Given current point (cx, cy), quadratic control point (cpx, cpy), and end (x, y):
+ *   cp1 = current + 2/3 * (cp - current)
+ *   cp2 = end + 2/3 * (cp - end)
+ */
+export declare function quadraticToCubic(cx: number, cy: number, cpx: number, cpy: number, x: number, y: number): {
+    cp1x: number;
+    cp1y: number;
+    cp2x: number;
+    cp2y: number;
+};
+/**
+ * Compute arcTo parameters.
+ * Canvas arcTo(x1,y1,x2,y2,radius) draws a line from current point to the tangent point,
+ * then an arc of the given radius tangent to both lines (current→p1 and p1→p2).
+ *
+ * Returns the two tangent points and arc center, or null if degenerate (collinear points).
+ */
+export declare function computeArcTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, radius: number): {
+    tx0: number;
+    ty0: number;
+    tx1: number;
+    ty1: number;
+    cx: number;
+    cy: number;
+    startAngle: number;
+    endAngle: number;
+    counterclockwise: boolean;
+} | null;
+/**
+ * Apply an arcTo operation to a Cairo context.
+ */
+export declare function cairoArcTo(ctx: Cairo.Context, x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, radius: number): void;
+/**
+ * Draw an ellipse on a Cairo context.
+ * Canvas ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
+ * is implemented via save/translate/rotate/scale/arc/restore.
+ */
+export declare function cairoEllipse(ctx: Cairo.Context, x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise: boolean): void;
+/**
+ * Draw a rounded rectangle path on a Cairo context.
+ * Implements the Canvas roundRect(x, y, w, h, radii) method.
+ */
+export declare function cairoRoundRect(ctx: Cairo.Context, x: number, y: number, w: number, h: number, radii: number | number[]): void;
+/** Map Canvas globalCompositeOperation to Cairo.Operator values */
+export declare const COMPOSITE_OP_MAP: Record<string, number>;
+/** Map Canvas lineCap to Cairo.LineCap values */
+export declare const LINE_CAP_MAP: Record<string, number>;
+/** Map Canvas lineJoin to Cairo.LineJoin values */
+export declare const LINE_JOIN_MAP: Record<string, number>;