xbintsc 0.5.21 → 0.5.22

package/dist/src/driver/version.d.ts

@@ -9,4 +9,4 @@
  * `main`/`master` only (see `.githooks/pre-commit`), so feature branches never
  * change this line and merging two of them cannot conflict here.
  */
-export declare const COMPILER_VERSION = "0.5.21";
+export declare const COMPILER_VERSION = "0.5.22";

package/dist/src/driver/version.js

@@ -9,5 +9,5 @@
  * `main`/`master` only (see `.githooks/pre-commit`), so feature branches never
  * change this line and merging two of them cannot conflict here.
  */
-export const COMPILER_VERSION = "0.5.21";
+export const COMPILER_VERSION = "0.5.22";
 //# sourceMappingURL=version.js.map

package/dist/tests/e2e/gui-canvas.test.js

@@ -159,6 +159,165 @@ describe.skipIf(!guiAvailable)("gui extension — canvas", () => {
         expect(value("fill")).toBe("#ff0000");
         expect(value("text")).toBe("true");
     });
+    it("supports gradients, ellipses, rounded rects, dashes and line styles", () => {
+        const { value } = harness.compileAndRun("canvas-modern", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>body { margin: 0; }</style></head><body>
+        <canvas id="c" width="240" height="260"></canvas>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "canvas-modern", width: 400, height: 300 });
+      win.on("ready", () => {
+        const canvas: any = win.document.getElementById("c");
+        const ctx: any = canvas.getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, 240, 260);
+
+        // A horizontal red -> blue gradient, sampled well inside both ends.
+        const linear = ctx.createLinearGradient(0, 0, 100, 0);
+        linear.addColorStop(0, "#ff0000");
+        linear.addColorStop(1, "#0000ff");
+        ctx.fillStyle = linear;
+        ctx.fillRect(0, 0, 100, 20);
+        console.log("grad-left=" + px(5, 10));
+        console.log("grad-right=" + px(95, 10));
+        // The getter returns the same handle, not a copy.
+        console.log("same-gradient=" + (ctx.fillStyle === linear));
+
+        // A stop added after assignment is live: the right side turns blue.
+        const live = ctx.createLinearGradient(0, 0, 100, 0);
+        live.addColorStop(0, "#ff0000");
+        ctx.fillStyle = live;
+        live.addColorStop(1, "#0000ff");
+        ctx.fillRect(0, 30, 100, 20);
+        console.log("live-right=" + px(95, 40));
+
+        const radial = ctx.createRadialGradient(50, 70, 0, 50, 70, 35);
+        radial.addColorStop(0, "#ffffff");
+        radial.addColorStop(1, "#000000");
+        ctx.fillStyle = radial;
+        ctx.fillRect(0, 60, 100, 40);
+        console.log("radial-centre=" + px(50, 70));
+        console.log("radial-edge=" + px(88, 70));
+
+        ctx.fillStyle = "#00ff00";
+        ctx.beginPath();
+        ctx.ellipse(170, 70, 40, 15, 0, 0, Math.PI * 2);
+        ctx.fill();
+        console.log("ellipse-centre=" + px(170, 70));
+        console.log("ellipse-outside=" + px(170, 40));
+
+        ctx.fillStyle = "#ff00ff";
+        ctx.beginPath();
+        ctx.roundRect(10, 100, 70, 50, 14);
+        ctx.fill();
+        console.log("roundrect-centre=" + px(45, 125));
+        console.log("roundrect-corner=" + px(11, 101));
+
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 4;
+        ctx.lineCap = "butt";
+        ctx.setLineDash([10, 10]);
+        ctx.lineDashOffset = 0;
+        console.log("cap=" + ctx.lineCap);
+        console.log("join=" + ctx.lineJoin);
+        console.log("miter=" + ctx.miterLimit);
+        console.log("dash=" + ctx.getLineDash().join(","));
+        ctx.beginPath();
+        ctx.moveTo(120, 150);
+        ctx.lineTo(230, 150);
+        ctx.stroke();
+        console.log("dash-on=" + px(124, 150));
+        console.log("dash-off=" + px(136, 150));
+
+        ctx.setLineDash([]);
+        ctx.strokeStyle = "#ff0000";
+        ctx.lineWidth = 10;
+        ctx.lineCap = "square";
+        ctx.beginPath();
+        ctx.moveTo(120, 190);
+        ctx.lineTo(180, 190);
+        ctx.stroke();
+        console.log("square-cap=" + px(115, 190));
+        console.log("square-cap-far=" + px(105, 190));
+
+        // A miter fills the outer corner right to the tip; a bevel cuts it off.
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 20;
+        ctx.lineCap = "butt";
+        ctx.lineJoin = "miter";
+        ctx.beginPath();
+        ctx.moveTo(120, 215);
+        ctx.lineTo(120, 245);
+        ctx.lineTo(160, 245);
+        ctx.stroke();
+        console.log("miter-join=" + px(111, 254));
+        ctx.lineJoin = "bevel";
+        ctx.beginPath();
+        ctx.moveTo(180, 215);
+        ctx.lineTo(180, 245);
+        ctx.lineTo(220, 245);
+        ctx.stroke();
+        console.log("bevel-join=" + px(171, 254));
+
+        ctx.save();
+        ctx.translate(100, 100);
+        ctx.rotate(Math.PI / 2);
+        const t = ctx.getTransform();
+        console.log("nested-transform=" + Math.round(t.e) + "," + Math.round(t.f));
+        // Post-multiplied: the square sits at (90,100)..(100,110), not at the
+        // rotated origin. A pre-multiplied transform would put it elsewhere.
+        ctx.fillStyle = "#ff8800";
+        ctx.fillRect(0, 0, 10, 10);
+        console.log("rotated-rect=" + px(95, 105));
+        ctx.restore();
+        const r = ctx.getTransform();
+        console.log("restored-transform=" + r.a + "," + r.e + "," + r.f);
+
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const channels = (label) => value(label).split(",").map(Number);
+        const left = channels("grad-left");
+        expect(left[0]).toBeGreaterThan(200);
+        expect(left[2]).toBeLessThan(60);
+        const right = channels("grad-right");
+        expect(right[0]).toBeLessThan(60);
+        expect(right[2]).toBeGreaterThan(200);
+        expect(value("same-gradient")).toBe("true");
+        expect(channels("live-right")[2]).toBeGreaterThan(200);
+        // The radial gradient is white at its centre and black at its edge.
+        expect(channels("radial-centre")[0]).toBeGreaterThan(230);
+        expect(channels("radial-edge")[0]).toBeLessThan(40);
+        expect(channels("ellipse-centre")).toEqual([0, 255, 0, 255]);
+        expect(channels("ellipse-outside")).toEqual([255, 255, 255, 255]);
+        expect(channels("roundrect-centre")).toEqual([255, 0, 255, 255]);
+        expect(channels("roundrect-corner")).toEqual([255, 255, 255, 255]);
+        expect(value("cap")).toBe("butt");
+        expect(value("join")).toBe("miter");
+        expect(value("miter")).toBe("10");
+        expect(value("dash")).toBe("10,10");
+        expect(channels("dash-on")).toEqual([0, 0, 0, 255]);
+        expect(channels("dash-off")).toEqual([255, 255, 255, 255]);
+        // A square cap extends half a line width past the endpoint.
+        expect(channels("square-cap")).toEqual([255, 0, 0, 255]);
+        expect(channels("square-cap-far")).toEqual([255, 255, 255, 255]);
+        expect(channels("miter-join")).toEqual([0, 0, 0, 255]);
+        expect(channels("bevel-join")).toEqual([255, 255, 255, 255]);
+        expect(value("nested-transform")).toBe("100,100");
+        expect(channels("rotated-rect")).toEqual([255, 136, 0, 255]);
+        expect(value("restored-transform")).toBe("1,0,0");
+    });
     it("draws an image onto a canvas with drawImage", () => {
         const src = harness.imageSrc(harness.logoPath);
         const { value } = harness.compileAndRun("canvas-drawimage", `

package/dist/tests/e2e/gui-canvas.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"gui-canvas.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-canvas.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"gui-canvas.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-canvas.test.ts"],"names":[],"mappings":"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"}

package/dist/tests/e2e/gui-example-canvas.test.d.ts

@@ -0,0 +1,11 @@
+/**
+ * End-to-end smoke test for `examples/gui/pelican-canvas` — the animated
+ * `<canvas>` drawing.
+ *
+ * The drawing lives in `scene.js`, loaded by `index.html` through a plain
+ * `<script src>`: a browser runs it as-is, while xbintsc AOT-compiles the same
+ * body via the gui `.html` loader. `main.ts` only hosts the native window and
+ * reports deterministic pixel probes, so this test can assert that the
+ * gradients, paths and text really rasterised.
+ */
+export {};

package/dist/tests/e2e/gui-example-canvas.test.js

@@ -0,0 +1,70 @@
+/**
+ * End-to-end smoke test for `examples/gui/pelican-canvas` — the animated
+ * `<canvas>` drawing.
+ *
+ * The drawing lives in `scene.js`, loaded by `index.html` through a plain
+ * `<script src>`: a browser runs it as-is, while xbintsc AOT-compiles the same
+ * body via the gui `.html` loader. `main.ts` only hosts the native window and
+ * reports deterministic pixel probes, so this test can assert that the
+ * gradients, paths and text really rasterised.
+ */
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { spawnSync } from "node:child_process";
+import { Script } from "node:vm";
+import { fileURLToPath } from "node:url";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { build } from "../../src/driver/compiler.js";
+import { createDefaultRegistry } from "../../src/extensions/registry.js";
+import { guiExtension } from "../../src/extensions/gui/index.js";
+import { guiAvailable } from "./gui-helpers.js";
+/** The example lives at <repo>/examples/gui/pelican-canvas. */
+const exampleDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "examples", "gui", "pelican-canvas");
+let workdir = "";
+describe("pelican canvas example — browser entry", () => {
+    it("loads the shared scene as a classic script", () => {
+        const html = readFileSync(join(exampleDir, "index.html"), "utf8");
+        expect(html).toContain('<script src="./scene.js"></script>');
+        const script = readFileSync(join(exampleDir, "scene.js"), "utf8");
+        // A browser compiles this as a classic script: no ESM, no TypeScript.
+        expect(() => new Script(script)).not.toThrow();
+    });
+});
+describe.skipIf(!guiAvailable)("gui example — pelican canvas", () => {
+    beforeAll(() => {
+        workdir = mkdtempSync(join(tmpdir(), "xbintsc-pelican-canvas-"));
+        for (const file of ["index.html", "main.ts", "scene.js"]) {
+            writeFileSync(join(workdir, file), readFileSync(join(exampleDir, file), "utf8"));
+        }
+    });
+    afterAll(() => {
+        rmSync(workdir, { recursive: true, force: true });
+    });
+    it("compiles the canvas drawing and reports pixels", () => {
+        const extensions = createDefaultRegistry().register(guiExtension);
+        const result = build(join(workdir, "main.ts"), {
+            emit: "exe",
+            outDir: join(workdir, "out"),
+            cacheDir: join(workdir, ".cache"),
+            extensions,
+        });
+        expect(result.diagnostics.filter((diagnostic) => diagnostic.category === "error")).toEqual([]);
+        const executed = spawnSync(result.outputPath, [], {
+            encoding: "utf8",
+            env: { ...process.env, XT_GUI_AUTOCLOSE_MS: "2000" },
+        });
+        expect(executed.status, executed.stderr).toBe(0);
+        const stdout = executed.stdout ?? "";
+        expect(stdout).toContain("window=1000x640 (gui extension, SDL_GPU)");
+        expect(stdout).toContain("canvas-box=x=0 y=0 1000x640");
+        expect(stdout).toContain("canvas-size=1000x640");
+        // The title is white text on the gradient sky.
+        expect(stdout).toContain("pixel-title=255,255,255,255");
+        // The road gradient, and the pelican body (not the sky colour).
+        expect(stdout).toMatch(/pixel-road=\d+,\d+,\d+,255/);
+        expect(stdout).toMatch(/pixel-pelican=\d+,\d+,\d+,255/);
+        expect(stdout).toContain("gui exited");
+    });
+});
+//# sourceMappingURL=gui-example-canvas.test.js.map

package/dist/tests/e2e/gui-example-canvas.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-example-canvas.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-example-canvas.test.ts"],"names":[],"mappings":"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"}

package/doc/ai/extensions.md

@@ -76,9 +76,10 @@ media API (`play`/`pause`/`currentTime`/`volume`/…) plus the
 program drive playback. There are no built-in controls — draw your own chrome
 with elements and CSS (see `examples/gui/media.ts`). Video frames and audio PCM
 are decoded on the main thread. `<canvas>` is supported too: `getContext("2d")`
-returns a context whose fills, paths, text and `drawImage` are rasterised by a
-self-written CPU rasteriser, and element handles expose `canvas` drawing plus
-`width`/`height`. CSS `transform`/`transform-origin` work as paint-time
+returns a context whose fills, paths, gradients, text and `drawImage` are
+rasterised by a self-written CPU rasteriser (plus line caps/joins, dashed
+strokes, `ellipse` and `roundRect`), and element handles expose `canvas` drawing
+plus `width`/`height`. CSS `transform`/`transform-origin` work as paint-time
 effects, so a box (and the text, images and children in it) can be translated,
 scaled and rotated without reflowing anything — animate it per frame from
 `requestAnimationFrame` or with `transition: transform` (see

package/doc/ai/zh-CN/extensions.md

@@ -71,7 +71,8 @@ import { createWindow, run } from "gui";
 `loadedmetadata`/`play`/`pause`/`ended`/`timeupdate`/`error` 事件可让程序驱动播放。
 没有内置控件——用元素和 CSS 自绘控件（见 `examples/gui/media.ts`）；视频帧与音频 PCM
 都在主线程解码。也支持 `<canvas>`：`getContext("2d")` 返回的上下文，其填充、路径、
-文本与 `drawImage` 由自研 CPU 光栅器处理，元素句柄还暴露 `width`/`height`。CSS
+渐变、文本与 `drawImage` 由自研 CPU 光栅器处理（另有线段端点/连接、虚线描边、
+`ellipse` 与 `roundRect`），元素句柄还暴露 `width`/`height`。CSS
 `transform`/`transform-origin` 作为绘制期效果可用，因此一个盒子（以及其中的文本、
 图像与子元素）可以被平移、缩放与旋转而不触发任何重排——可以用
 `requestAnimationFrame` 逐帧驱动，或写成 `transition: transform`（见

package/doc/gui/canvas.md

@@ -13,8 +13,11 @@ video frames (`renderer_image.cpp`), so the GPU scales it into the CSS box.
 
 The engine-side object is `xtgui::Canvas2D`
 (`runtime/ext_gui/canvas.{h,cpp}`) — one RGBA8 bitmap plus the 2D drawing state.
-The rasteriser lives in `canvas_raster.cpp`; the DOM bindings live in
-`dom_api_canvas.cpp`, and the per-window lifetime in `gui_canvas.cpp`.
+The rasteriser lives in `canvas_raster.cpp`, stroke geometry (caps, joins,
+dashes) in `canvas_stroke.cpp`, gradients in `canvas_gradient.cpp`, and drawing
+state parsing in `canvas_style.cpp`; the DOM bindings live in
+`dom_api_canvas.cpp` / `dom_api_canvas_extra.cpp`, and the per-window lifetime in
+`gui_canvas.cpp`.
 
 ## Getting a context
 
@@ -37,6 +40,14 @@ horizontal coverage** pass, and fills paths with the **non-zero winding rule**
 (`b == 0 && c == 0` in the transform) takes a direct coverage fast path.
 Blending is non-premultiplied source-over, scaled by `globalAlpha`.
 
+A fill or stroke paints with a solid colour **or a `CanvasGradient`**. Gradient
+coordinates are user-space coordinates, so the rasteriser maps each device pixel
+back through the inverse of the current transform before sampling; this keeps a
+gradient attached to the shape when the shape is translated, scaled or rotated.
+Strokes are flattened into segment quads plus the join/cap shapes selected by
+`lineJoin`/`lineCap`; a dash pattern first splits the polyline into its "on"
+pieces, then those pieces are stroked with the same caps.
+
 Canvas pixels are **not** touched by the garbage collector: a canvas is owned by
 the window, keyed by its DOM node (the same shape as the `<video>`/`<audio>`
 decode table). It is released when the node is dropped (`loadHTML`, window
@@ -48,24 +59,39 @@ matching GPU texture.
 State and transforms: `save` / `restore` (which restore the transform, line
 width, alpha, font/text settings **and** the fill/stroke styles),
 `translate`, `rotate`, `scale`, `transform(a,b,c,d,e,f)`, `setTransform`,
-`resetTransform`.
+`resetTransform`, `getTransform` (returns an object with `a`…`f` and `is2D`).
+Transforms compose in canvas order: `translate(x, y); rotate(a)` rotates around
+the translated origin.
 
 Styles and settings: `fillStyle` / `strokeStyle` (CSS colors understood by the
-cascade's color parser), `lineWidth`, `globalAlpha`, `font` (a CSS font
-shorthand resolving to family, size and bold/italic — default
-`10px sans-serif`), `textAlign` (`start`/`left`, `center`, `right`/`end`) and
-`textBaseline` (`alphabetic`, `top`, `middle`, `bottom`, `hanging`,
-`ideographic`). Reading a property returns the value last assigned; assigning an
-unparseable color keeps the previous one.
-
-Paths: `beginPath`, `closePath`, `moveTo`, `lineTo`, `rect`, `arc`,
-`quadraticCurveTo`, `bezierCurveTo`, then `fill` (multi-loop, non-zero winding)
-or `stroke`. Bezier and quadratic segments are flattened into line segments;
-arcs are flattened too and each subpath is stroked as segment quads plus a disc
-at each joint.
+cascade's color parser, or a `CanvasGradient`), `lineWidth`, `globalAlpha`,
+`lineCap` (`butt`/`round`/`square`), `lineJoin` (`miter`/`round`/`bevel`),
+`miterLimit`, `lineDashOffset`, `font` (a CSS font shorthand resolving to
+family, size and bold/italic — default `10px sans-serif`), `textAlign`
+(`start`/`left`, `center`, `right`/`end`) and `textBaseline` (`alphabetic`,
+`top`, `middle`, `bottom`, `hanging`, `ideographic`). Reading a property returns
+the value last assigned; assigning an unparseable color keeps the previous one.
+
+Gradients: `createLinearGradient(x0, y0, x1, y1)` and
+`createRadialGradient(x0, y0, r0, x1, y1, r1)` return a `CanvasGradient` with
+`addColorStop(offset, color)`. Stops stay live, so a stop added after
+`fillStyle = gradient` affects later fills, and the `fillStyle`/`strokeStyle`
+getter returns the same gradient handle. Radial gradients interpolate by
+distance from the **outer** circle's centre (`x1, y1`), so `x0`/`y0` are
+currently ignored: use concentric circles (`x0 == x1`, `y0 == y1`).
+
+Paths: `beginPath`, `closePath`, `moveTo`, `lineTo`, `rect`, `roundRect`,
+`arc`, `ellipse`, `quadraticCurveTo`, `bezierCurveTo`, then `fill` (multi-loop,
+non-zero winding) or `stroke`. Bezier and quadratic segments are flattened into
+line segments; arcs and ellipses are flattened too. `roundRect` accepts one
+radius number (the array form is not implemented).
 
 Rectangles: `clearRect`, `fillRect`, `strokeRect`.
 
+Dashes: `setLineDash(segments)` / `getLineDash()` / `lineDashOffset` implement
+the standard pattern rules (an odd-length list is duplicated, negative or
+non-finite entries are ignored, an all-zero list means a solid line).
+
 Text: `measureText(text)` (returns `{ width }`), `fillText(text, x, y)` and
 `strokeText(text, x, y)`. Text is shaped with HarfBuzz and rasterised with
 FreeType (the same stack as HTML text) at the transform's approximate scale.
@@ -87,12 +113,12 @@ Out-of-bounds pixels are transparent.
 
 ## Not implemented
 
-Gradients and patterns, shadows, `clip()`, `globalCompositeOperation`, line
-joins/caps/dashes/mitre, `setLineDash`, `createLinearGradient`/`createPattern`,
-`putImageData`, `createImageData`, `isPointInPath`, `getTransform`,
-`setTransform` with a `DOMMatrix`, `drawImage` with an image smoothing toggle,
-`toDataURL`/`toBlob`, `<canvas>` as a CSS `background-image`, and offscreen
-canvases (`OffscreenCanvas`, `transferControlToOffscreen`).
+Patterns (`createPattern`), shadows, `clip()`, `globalCompositeOperation`,
+`putImageData`, `createImageData`, `isPointInPath`, `setTransform` with a
+`DOMMatrix`, `drawImage` with an image smoothing toggle, `toDataURL`/`toBlob`,
+`<canvas>` as a CSS `background-image`, and offscreen canvases
+(`OffscreenCanvas`, `transferControlToOffscreen`). `roundRect` takes a single
+radius, and radial gradients ignore the inner circle's offset.
 
 See also [Media](./media.md) for the image/video/audio decode stack that
 `drawImage` and the texture upload share.

package/doc/gui.md

@@ -354,7 +354,13 @@ engine were Rust.
   `getContext("2d")` handle and its API are bound in `dom_api_canvas.cpp`, and
   `gui_canvas.cpp` owns the per-window lifetime. The bitmap uploads through the
   image texture path (`renderer_image.cpp`) and the display list carries a
-  `canvas_id` (`paint.*`). See [Canvas](./gui/canvas.md); e2e in
+  `canvas_id` (`paint.*`). The drawing surface was later widened with linear /
+  radial gradients (`canvas_gradient.cpp`), `ellipse`/`roundRect`, line
+  caps/joins/miter limits and dash patterns (`canvas_style.cpp`,
+  `canvas_stroke.cpp`), and `getTransform`; `transform` now post-multiplies, so
+  `translate(x, y); rotate(a)` rotates around the translated origin, and
+  `examples/gui/pelican-canvas` draws an animated pelican on a bicycle entirely
+  with these APIs. See [Canvas](./gui/canvas.md); e2e in
   `tests/e2e/gui-canvas.test.ts`.
 - **M15** ✅ CSS `transform` / `transform-origin`. A new translation unit
   (`transform.{h,cpp}`) parses `translate`/`translateX`/`translateY`/`scale`/

package/doc/zh-CN/gui/canvas.md

@@ -10,7 +10,9 @@
 CSS 盒中。
 
 引擎侧的对象是 `xtgui::Canvas2D`（`runtime/ext_gui/canvas.{h,cpp}`）——一块 RGBA8 位图
-加上 2D 绘制状态。光栅器位于 `canvas_raster.cpp`；DOM 绑定位于 `dom_api_canvas.cpp`；
+加上 2D 绘制状态。光栅器位于 `canvas_raster.cpp`，描边几何（端点、连接、虚线）位于
+`canvas_stroke.cpp`，渐变位于 `canvas_gradient.cpp`，绘制状态解析位于
+`canvas_style.cpp`；DOM 绑定位于 `dom_api_canvas.cpp` / `dom_api_canvas_extra.cpp`；
 按窗口的生命周期位于 `gui_canvas.cpp`。
 
 ## 获取上下文
@@ -31,6 +33,11 @@ const ctx = canvas.getContext("2d"); // 其他上下文类型返回 null
 以相反方向环绕时能形成空洞）。轴对齐矩形（变换中 `b == 0 && c == 0`）走直接的覆盖率
 快速路径。混合为非预乘 source-over，并按 `globalAlpha` 缩放。
 
+填充或描边可以使用纯色，也可以使用 **`CanvasGradient`**。渐变的坐标属于用户空间，
+因此光栅器会先用当前变换的逆矩阵把每个设备像素映射回用户空间再采样——形状被平移、
+缩放或旋转时，渐变仍然贴在形状上。描边被展平为线段四边形，再按 `lineJoin`/`lineCap`
+补上连接/端点形状；虚线模式先把折线切成“实线”片段，然后用同样的端点规则描边。
+
 Canvas 像素**不参与垃圾回收**：canvas 由窗口拥有、以 DOM 节点为键（与
 `<video>`/`<audio>` 解码表结构相同）。当节点被丢弃（`loadHTML`、窗口关闭/退出，或丢弃
 子树的变更操作）时随之释放，并释放对应的 GPU 纹理。
@@ -39,21 +46,34 @@ Canvas 像素**不参与垃圾回收**：canvas 由窗口拥有、以 DOM 节点
 
 状态与变换：`save` / `restore`（会恢复变换、线宽、透明度、字体/文本设置**以及**
 填充/描边样式）、`translate`、`rotate`、`scale`、`transform(a,b,c,d,e,f)`、
-`setTransform`、`resetTransform`。
-
-样式与设置：`fillStyle` / `strokeStyle`（层叠所用的颜色解析器能识别的 CSS 颜色）、
-`lineWidth`、`globalAlpha`、`font`（CSS 字体简写，解析出字体族、字号与粗体/斜体——
-默认 `10px sans-serif`）、`textAlign`（`start`/`left`、`center`、`right`/`end`）与
-`textBaseline`（`alphabetic`、`top`、`middle`、`bottom`、`hanging`、`ideographic`）。
-读取属性返回上次赋予的值；赋予无法解析的颜色会保留原值。
-
-路径：`beginPath`、`closePath`、`moveTo`、`lineTo`、`rect`、`arc`、
-`quadraticCurveTo`、`bezierCurveTo`，然后 `fill`（多环、非零环绕）或 `stroke`。贝塞尔
-与二次曲线段会被展平为线段；弧线同样被展平，每条子路径按线段四边形描边，并在每个连接
-处补一个圆盘。
+`setTransform`、`resetTransform`、`getTransform`（返回带 `a`…`f` 与 `is2D` 的对象）。
+变换按 canvas 的顺序组合：`translate(x, y); rotate(a)` 围绕平移后的原点旋转。
+
+样式与设置：`fillStyle` / `strokeStyle`（层叠所用的颜色解析器能识别的 CSS 颜色，或
+`CanvasGradient`）、`lineWidth`、`globalAlpha`、`lineCap`（`butt`/`round`/`square`）、
+`lineJoin`（`miter`/`round`/`bevel`）、`miterLimit`、`lineDashOffset`、`font`
+（CSS 字体简写，解析出字体族、字号与粗体/斜体——默认 `10px sans-serif`）、
+`textAlign`（`start`/`left`、`center`、`right`/`end`）与 `textBaseline`
+（`alphabetic`、`top`、`middle`、`bottom`、`hanging`、`ideographic`）。读取属性返回
+上次赋予的值；赋予无法解析的颜色会保留原值。
+
+渐变：`createLinearGradient(x0, y0, x1, y1)` 与
+`createRadialGradient(x0, y0, r0, x1, y1, r1)` 返回带
+`addColorStop(offset, color)` 的 `CanvasGradient`。色标是**活的**：在
+`fillStyle = gradient` 之后追加的色标会影响后续填充，且 `fillStyle`/`strokeStyle`
+的读取返回同一个渐变句柄。径向渐变按到**外圆**圆心（`x1, y1`）的距离插值，因此目前
+会忽略 `x0`/`y0`——请使用同心圆（`x0 == x1`、`y0 == y1`）。
+
+路径：`beginPath`、`closePath`、`moveTo`、`lineTo`、`rect`、`roundRect`、`arc`、
+`ellipse`、`quadraticCurveTo`、`bezierCurveTo`，然后 `fill`（多环、非零环绕）或
+`stroke`。贝塞尔与二次曲线段会被展平为线段；弧线与椭圆同样被展平。`roundRect` 只接受
+单个圆角半径数字（数组形式尚未实现）。
 
 矩形：`clearRect`、`fillRect`、`strokeRect`。
 
+虚线：`setLineDash(segments)` / `getLineDash()` / `lineDashOffset` 实现标准规则
+（奇数长度列表会复制一遍，负数/非有限值会被忽略，全零列表表示实线）。
+
 文本：`measureText(text)`（返回 `{ width }`）、`fillText(text, x, y)` 与
 `strokeText(text, x, y)`。文本经 HarfBuzz 排版、FreeType 光栅化（与 HTML 文本相同的
 技术栈），按变换的近似缩放绘制。**仅支持平移与均匀缩放**——旋转或斜切变换仍会把每个
@@ -70,11 +90,10 @@ Canvas 像素**不参与垃圾回收**：canvas 由窗口拥有、以 DOM 节点
 
 ## 尚未实现
 
-渐变与图案、阴影、`clip()`、`globalCompositeOperation`、线段连接/端点/虚线/斜接、
-`setLineDash`、`createLinearGradient`/`createPattern`、`putImageData`、
-`createImageData`、`isPointInPath`、`getTransform`、以 `DOMMatrix` 调用的
+图案（`createPattern`）、阴影、`clip()`、`globalCompositeOperation`、
+`putImageData`、`createImageData`、`isPointInPath`、以 `DOMMatrix` 调用的
 `setTransform`、可切换图像平滑的 `drawImage`、`toDataURL`/`toBlob`、把 `<canvas>` 用作
 CSS `background-image`，以及离屏画布（`OffscreenCanvas`、
-`transferControlToOffscreen`）。
+`transferControlToOffscreen`）。`roundRect` 只接受单个半径，径向渐变会忽略内圆偏移。
 
 另见[媒体](./media.md)：`drawImage` 与纹理上传所共享的图像/视频/音频解码栈。

package/doc/zh-CN/gui.md

@@ -296,8 +296,12 @@ FFmpeg `7.1`（可用 `SDL3_TAG` / `FREETYPE_VERSION` / `HARFBUZZ_VERSION` /
   （4 条子扫描线 + 水平解析覆盖率、非零环绕），`getContext("2d")` 句柄及其 API
   在 `dom_api_canvas.cpp` 绑定，`gui_canvas.cpp` 持有按窗口的生命周期。位图经
   图像纹理路径上传（`renderer_image.cpp`），显示列表携带 `canvas_id`
-  （`paint.*`）。参见 [Canvas](./gui/canvas.md)；e2e 见
-  `tests/e2e/gui-canvas.test.ts`。
+  （`paint.*`）。此后绘制面又补齐了线性/径向渐变（`canvas_gradient.cpp`）、
+  `ellipse`/`roundRect`、线段端点/连接/斜接上限与虚线模式（`canvas_style.cpp`、
+  `canvas_stroke.cpp`）以及 `getTransform`；`transform` 改为后乘，因此
+  `translate(x, y); rotate(a)` 围绕平移后的原点旋转，而
+  `examples/gui/pelican-canvas` 完全用这些 API 画出会动的鹈鹕骑自行车。参见
+  [Canvas](./gui/canvas.md)；e2e 见 `tests/e2e/gui-canvas.test.ts`。
 - **M15** ✅ CSS `transform` / `transform-origin`。新的翻译单元
   （`transform.{h,cpp}`）把 `translate`/`translateX`/`translateY`/`scale`/
   `scaleX`/`scaleY`/`rotate`/`matrix`（以及 `translate3d`/`scale3d`，其 `z` 参数被丢弃）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xbintsc",
-  "version": "0.5.21",
+  "version": "0.5.22",
   "description": "xbintsc - a TypeScript binary compiler (TypeScript -> LLVM IR -> native binary)",
   "type": "module",
   "license": "MIT",