xbintsc 0.5.21 → 0.5.23

package/doc/zh-CN/gui.md

@@ -3,9 +3,9 @@
 > 语言 / Language：[English](../gui.md) | **简体中文**
 
 状态：**M16** —— 功能（M1–M15）已全部完成：HTML 解析、CSS 选择器匹配、层叠（cascade）、计算样式与布局（块级、行内、Flexbox 与 CSS 定位）均已就位，引擎还会**绘制**：它构建一个由矩形、图像与排版后的文本 run 组成的显示列表，并通过 SDL_GPU 渲染。输入事件会经过命中测试并投递给原生 TS 处理器，`:hover`/`:focus` 会被动态匹配，`<img>` 依据其固有尺寸确定大小并从纹理绘制——位图（PNG/JPEG/…）与 SVG 文件皆可，后者按绘制尺寸光栅化，因此矢量图保持清晰——CSS transition 会为绘制属性做动画。**M16** 让内联 `<svg>` 子树获得同样的处理：子树被序列化回 SVG 文档，并按绘制设备尺寸光栅化，因此图标不再需要单独的文件。**M8** 增加了交互式 DOM：具有稳定标识的元素句柄、变更操作（`appendChild`、`textContent`、`classList`、`style` 等）以及支持捕获/冒泡的元素级事件。**M9** 会提前编译 `<script>` 主体（内联与 `<script src>`）——参见 `gui-scripts.md`。**M10** 增加 `requestAnimationFrame` 以及若干 DOM 辅助方法。**M11** 增加 `position: relative`/`absolute`/`fixed` 及其偏移，`examples/gui/pelican-bike`（一个可玩的 2D 游戏）就构建在它之上。**M12** 明确了 DOM 节点生命周期（哪些变更释放、哪些保留），并让引擎内存有界：参见[节点生命周期](./gui/dom.md)与[内存与 GC](./gui/runtime.md)。**M13** 真正播放
-`<video>`/`<audio>`——一个 vendored 的最小 FFmpeg 在主线程解码，视频帧走图像
-纹理路径、音频进入 SDL 流，DOM 媒体 API 暴露 `play`/`pause`/`currentTime`/…
-与媒体事件。**M14** 增加了 `<canvas>`，配一个自研的 2D 软件光栅器（抗锯齿
+`<video>`/`<audio>`——可选的 `media` 扩展用 vendored 的最小 FFmpeg 在主线程解码，
+视频帧走图像纹理路径、音频进入 SDL 流，DOM 媒体 API 暴露
+`play`/`pause`/`currentTime`/… 与媒体事件。只启用 `gui` 不会链接 FFmpeg。**M14** 增加了 `<canvas>`，配一个自研的 2D 软件光栅器（抗锯齿
 填充、路径、文本与 `drawImage`），并经图像纹理路径上传——参见
 [Canvas](./gui/canvas.md)。**M15** 增加了 CSS `transform` /
 `transform-origin`：每个布局盒一个合成好的 `Matrix2D`，由显示列表一路带到
@@ -52,7 +52,7 @@
 | 4 | 引擎**非自托管**（它是 C/C++，不是 TS），但不得影响编译器的平台无关设计。以按平台预构建的归档形式交付，通过 `nativeObjects` 链接。 |
 | 5 | **事件循环是通用的**：运行时暴露一个通用主循环钩子与一个轮询原语；任何 GUI 特定的东西都不会进入 `runtime/`。 |
 | 6 | 核心对象模型支持**多窗口**。 |
-| 7 | 第三方底层库**静态链接进 `gui.a`**，使发布版保持自包含；链接时只额外加入操作系统框架。 |
+| 7 | 第三方底层库**静态链接进扩展归档**，使发布版保持自包含；链接时只额外加入操作系统框架。`gui.a` 携带 SDL3/FreeType/HarfBuzz，可选的 `media.a` 携带 FFmpeg，仅在 `--ext media` 时链接。 |
 
 ## 架构
 
@@ -74,6 +74,7 @@
         窗口 + 输入（SDL3）── 多窗口
         文本（HarfBuzz + FreeType）── 字形图集 / SDF
         图像（stb_image；SVG 经 NanoSVG）
+        媒体 DOM + 音频 sink ── 可选的 media.a（FFmpeg）安装解码器
 ```
 
 引擎从不与编译器通信。编译器只看到一个带有 `nativeObjects()`、`linkerFlags()` 和 `modules()` 的 `Extension`。
@@ -87,16 +88,16 @@
 | 文本整形 | **HarfBuzz** | 正确处理复杂文种的整形 |
 | 字形光栅化 | **FreeType** | 字形轮廓 → GPU 图集 / SDF |
 | 图像 | 位图用 **stb_image**（vendored 头文件），SVG 用 **NanoSVG**（vendored 头文件） | 起步阶段用单头文件；SVG 文件按需光栅化 |
-| 视频 + 音频 | **FFmpeg**（静态 vendored，最小化构建） | 解码常用容器/编码；不依赖 WebView 或平台媒体框架 |
+| 视频 + 音频 | **FFmpeg**（静态 vendored，最小化构建，可选 `media` 扩展） | 解码常用容器/编码；不依赖 WebView 或平台媒体框架 |
 
 固定版本：SDL3 `release-3.2.10`、FreeType `2.13.3`、HarfBuzz `10.1.0`、
-FFmpeg `7.1`（可用 `SDL3_TAG` / `FREETYPE_VERSION` / `HARFBUZZ_VERSION` /
-`FFMPEG_VERSION` 覆盖）。
+FFmpeg `7.1`（供可选的 `media` 归档使用；可用 `SDL3_TAG` /
+`FREETYPE_VERSION` / `HARFBUZZ_VERSION` / `FFMPEG_VERSION` 覆盖）。
 
 如果否决 SDL3，备选是 **GLFW + OpenGL 3.3**（更简单，但 OpenGL 在 macOS 上
 已弃用，且不提供现代 GPU 抽象）。如果引擎用 Rust 编写，则用 **wgpu-native**。
 
-> 这些 vendored 库会**静态链接进 `gui.a`**，因此发布的 xbintsc 保持
+> 这些 vendored 库会**静态链接进 `gui.a` / `media.a`**，因此发布的 xbintsc 保持
 > “下载即用”；`linkerFlags()` 只添加操作系统框架。
 
 ## 里程碑
@@ -135,14 +136,15 @@ FFmpeg `7.1`（可用 `SDL3_TAG` / `FREETYPE_VERSION` / `HARFBUZZ_VERSION` /
      `background-color`/`color`/`border-color`/`border-radius` 的动画、重定向
      与 `win.advance(ms)`。`@keyframes` 仍待完成。
 7. **M7 — CI 与发布** ✅（Linux/macOS 构建） / 🚧（运行 + Windows）
-   - `compile-examples` 在 Linux 与 macOS 上构建 `gui.a`（必需），然后在
-     Linux 上的 Xvfb + lavapipe 下运行示例与 `tests/e2e/gui-*.test.ts`（必需）。
-     macOS 运行在确认 WindowServer 之前为试验性；它被保护起来，失败只记录
-     日志而不标注运行。
-   - `package` job 在组装发布之前构建 `gui.a`，因此它会随现有 runtime 归档
-     一起发布（`package-release` 复制整个 `runtime/`）。
-   - `vendor/`（SDL3/FreeType/HarfBuzz，缓慢的部分）按 OS/arch 缓存，以
-     `scripts/build-gui.ts` 为键。
+   - `compile-examples` 在 Linux 与 macOS 上构建 `gui.a` 与 `media.a`（必需），
+     然后在 Linux 上的 Xvfb + lavapipe 下运行示例与 `tests/e2e/gui-*.test.ts`
+     （必需）。macOS 运行在确认 WindowServer 之前为试验性；它被保护起来，失败
+     只记录日志而不标注运行。
+   - `package` job 在组装发布之前构建 `gui.a` 与 `media.a`，因此两者都会随现有
+     runtime 归档一起发布（`package-release` 复制整个 `runtime/`）。
+   - `vendor/`（`gui.a` 的 SDL3/FreeType/HarfBuzz，以及 `media.a` 的 FFmpeg，
+     缓慢的部分）按 OS/arch 缓存，以 `scripts/build-gui.ts` /
+     `scripts/build-media.ts` 为键。
    - Windows（构建 + 运行）在 CI 中保持试验性：MSVC 兼容的 `gui.lib` 可在本机
      通过 SDL_GPU 的 Vulkan 后端构建并运行，但托管 runner 没有 GPU/Vulkan
      驱动。失败只记录日志而不标注运行（见[待决问题](./gui/known-issues.md)）。
@@ -189,13 +191,14 @@ FFmpeg `7.1`（可用 `SDL3_TAG` / `FREETYPE_VERSION` / `HARFBUZZ_VERSION` /
     - `win.stats()` 暴露引擎计数器；e2e 覆盖见
       `tests/e2e/gui-retention.test.ts`（见[内存与 GC](./gui/runtime.md)）。
 13. **M13 — 视频与音频** ✅
-    - `<video>` / `<audio>` 通过静态 vendored 的最小 FFmpeg 解码
-      （`media.*`、`gui_media.cpp`），帧沿用现有图像管线上传到 GPU 纹理，
-      音频在主线程推送进 SDL 流，并在元素句柄上暴露 DOM 媒体 API 与
-      `loadedmetadata`/`play`/`pause`/`ended`/`timeupdate`/`error` 事件
-      （`dom_api_media.cpp`、`dom_api_proto.cpp`）。由 TS + CSS 控制；没有
-      内置控件。示例见 `examples/gui/media.*`，e2e 见
-      `tests/e2e/gui-media.test.ts`。
+    - `<video>` / `<audio>` 通过可选的 `media` 扩展（`runtime/ext_media/media.cpp`）
+      使用静态 vendored 的最小 FFmpeg 解码，帧沿用现有图像管线上传到 GPU 纹理，
+      音频由 GUI 的音频 sink 在主线程推送进 SDL 流，并在元素句柄上暴露 DOM
+      媒体 API 与 `loadedmetadata`/`play`/`pause`/`ended`/`timeupdate`/`error`
+      事件（`dom_api_media.cpp`、`dom_api_proto.cpp`）。由 TS + CSS 控制；没有
+      内置控件。示例见 `examples/gui/media.*`；e2e 见
+      `tests/e2e/gui-media.test.ts`（启用 `media`）与
+      `tests/e2e/gui-media-disabled.test.ts`（不启用）。
 14. **M14 — `<canvas>` 2D** ✅
     - `<canvas>` 是一个替换元素（`xtgui::Canvas2D`、`layout.*`），
       `getContext("2d")` 句柄与绘制 API 位于 `dom_api_canvas.cpp`，自研的抗锯齿
@@ -249,10 +252,10 @@ FFmpeg `7.1`（可用 `SDL3_TAG` / `FREETYPE_VERSION` / `HARFBUZZ_VERSION` /
   按绘制设备像素尺寸光栅化并按该尺寸缓存，因此缩放与 HiDPI 保持清晰。
 - **M6b** ✅ CSS transition（在 `style.*` 中解析、在 `document.*` 中维护动画
   时钟与 transition 状态、`advance`/`advance(ms)` 钩子、e2e 覆盖）。
-- **M7** ✅ 在 CI 中于 Linux 与 macOS 上构建 `gui.a`（必需），并在 Linux 的
-  Xvfb 下运行示例与 GUI e2e 套件；`package` 发布 `gui.a`，`vendor/` 被缓存，
-  `ar -M` 合并在 GNU/Linux 与 macOS 上可用。macOS 运行与所有 Windows 在 CI
-  中仍为试验性。
+- **M7** ✅ 在 CI 中于 Linux 与 macOS 上构建 `gui.a`（以及可选的 `media.a`，
+  必需），并在 Linux 的 Xvfb 下运行示例与 GUI e2e 套件；`package` 发布两个归档，
+  `vendor/` 被缓存，`ar -M` 合并在 GNU/Linux 与 macOS 上可用。macOS 运行与所有
+  Windows 在 CI 中仍为试验性。
 - **M8** ✅ 元素/文档句柄（`dom_api.*`）、带延迟重算样式/重新布局的 DOM 变更
   （`document.*`、`xt_gui_flush_dom`）、带捕获/冒泡与 `stopPropagation` 的
   元素事件分发（`dom_api.*`、`gui.cpp`），以及
@@ -283,11 +286,13 @@ FFmpeg `7.1`（可用 `SDL3_TAG` / `FREETYPE_VERSION` / `HARFBUZZ_VERSION` /
   失效；收集器的触发阈值改为跟随存活集，而不再只升不降。`win.stats()` 暴露
   引擎计数器，`tests/e2e/gui-retention.test.ts` 对其做断言；每帧重写精灵的游戏
   循环现在内存恒定（见[内存与 GC](./gui/runtime.md)）。
-- **M13** ✅ `<video>` / `<audio>` 支持。一个最小化的静态 FFmpeg 被 vendored
-  并合并进 `gui.a`（`scripts/build-gui.ts`），`media.*` 在主线程把视频解码为
-  RGBA 帧、把音频解码为 48 kHz 立体声 PCM，`gui_media.cpp` 持有播放器并在每帧
-  推进媒体时钟与事件，`renderer_image.cpp` 把每个新视频帧沿图像纹理路径上传，
-  `dom_api_media.cpp` 在元素句柄上暴露 `play`/`pause`/`load` 与媒体属性。
+- **M13** ✅ `<video>` / `<audio>` 支持。可选的 `media` 扩展 vendored 并构建一个
+  最小化的静态 FFmpeg（`scripts/build-media.ts`），合并进 `media.a`；
+  `runtime/ext_media/media.cpp` 在主线程把视频解码为 RGBA 帧、把音频解码为
+  48 kHz 立体声 PCM，`runtime/ext_gui/gui_media.cpp` 持有播放器、实现 SDL 音频
+  sink 并在每帧推进媒体时钟与事件，`renderer_image.cpp` 把每个新视频帧沿图像纹理
+  路径上传，`dom_api_media.cpp` 在元素句柄上暴露 `play`/`pause`/`load` 与媒体
+  属性。`gui.a` 不含 FFmpeg；只启用 `media` 而不启用 `gui` 会被注册表拒绝。
   `examples/gui/media.*` 演示 TS + CSS 控件的模式，
   `tests/e2e/gui-media.test.ts` 对其做断言。
 - **M14** ✅ `<canvas>` 支持。新的替换元素（`layout.*`）从 `width`/`height`
@@ -296,8 +301,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.23",
   "description": "xbintsc - a TypeScript binary compiler (TypeScript -> LLVM IR -> native binary)",
   "type": "module",
   "license": "MIT",
@@ -37,6 +37,7 @@
     "prepublishOnly": "npm run build",
     "runtime": "tsx scripts/build-runtime.ts",
     "gui": "tsx scripts/build-gui.ts",
+    "media": "tsx scripts/build-media.ts",
     "package-release": "tsx scripts/package-release.ts",
     "runtime:clean": "node -e \"require('fs').rmSync('build/runtime-obj',{recursive:true,force:true});require('fs').rmSync('runtime/lib',{recursive:true,force:true})\"",
     "xbintsc": "tsx src/cli/main.ts",

package/runtime/ext_gui/canvas.cpp

@@ -12,12 +12,10 @@
 #include <algorithm>
 #include <atomic>
 #include <cmath>
-#include <cstdlib>
 #include <cstring>
 #include <unordered_map>
 
 #include "canvas_internal.h"
-#include "css.h"
 
 namespace xtgui {
 
@@ -32,99 +30,12 @@ std::unordered_map<uint64_t, Canvas2D *> &canvas_registry() {
   return registry;
 }
 
-std::string lower_ascii(const std::string &value) {
-  std::string out = value;
-  for (char &c : out) {
-    if (c >= 'A' && c <= 'Z') c = (char)(c - 'A' + 'a');
-  }
-  return out;
-}
-
-bool parse_font_size_token(const std::string &token, float fallback, float *out) {
-  std::string lower = lower_ascii(token);
-  struct Suffix {
-    const char *text;
-    float factor;
-  };
-  static const Suffix suffixes[] = {{"px", 1.0f},  {"pt", 96.0f / 72.0f}, {"pc", 16.0f},
-                                    {"in", 96.0f}, {"cm", 96.0f / 2.54f}, {"mm", 96.0f / 25.4f},
-                                    {"q", 96.0f / 101.6f}, {"em", 0.0f}, {"rem", 0.0f}};
-  for (const Suffix &suffix : suffixes) {
-    size_t length = std::strlen(suffix.text);
-    if (lower.size() <= length || lower.compare(lower.size() - length, length, suffix.text) != 0)
-      continue;
-    char *end = nullptr;
-    float value = std::strtof(lower.c_str(), &end);
-    if (end == lower.c_str()) return false;
-    if (suffix.factor == 0.0f) {
-      *out = value * fallback;
-    } else {
-      *out = value * suffix.factor;
-    }
-    return true;
-  }
-  return false;
-}
-
-/** Parse the CSS `font` shorthand into a `FontSpec` (the pieces Canvas2D
- * understands; unknown tokens are ignored). */
-FontSpec parse_font_string(const std::string &text) {
-  FontSpec spec;
-  spec.family = "sans-serif";
-  spec.pixel_size = 10.0f;
-  spec.weight = 400;
-  spec.italic = false;
-  std::vector<std::string> tokens = xt_css_split_whitespace(text);
-  std::vector<std::string> family;
-  float size = 10.0f;
-  bool have_size = false;
-  for (const std::string &token : tokens) {
-    std::string lower = lower_ascii(token);
-    float parsed = 0.0f;
-    if (!have_size && parse_font_size_token(lower, 16.0f, &parsed)) {
-      size = parsed;
-      have_size = true;
-      continue;
-    }
-    if (lower == "italic" || lower == "oblique") {
-      spec.italic = true;
-      continue;
-    }
-    if (lower == "bold") {
-      spec.weight = 700;
-      continue;
-    }
-    if (lower == "bolder") {
-      spec.weight = 700;
-      continue;
-    }
-    if (lower == "lighter") {
-      spec.weight = 300;
-      continue;
-    }
-    if (lower == "normal" || lower == "small-caps") continue;
-    if (!lower.empty() && lower.back() == ',') lower.pop_back();
-    if (!lower.empty()) family.push_back(lower);
-  }
-  spec.pixel_size = size;
-  if (!family.empty()) spec.family = family[0];
-  return spec;
-}
-
-void parse_color_into(const std::string &css, float color[4], std::string *stored) {
-  Color parsed = xt_css_parse_color(css);
-  if (!parsed.valid) return;
-  color[0] = parsed.r;
-  color[1] = parsed.g;
-  color[2] = parsed.b;
-  color[3] = parsed.a;
-  *stored = css;
-}
-
 CanvasPoint lerp(const CanvasPoint &a, const CanvasPoint &b, float t) {
   return CanvasPoint{a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t};
 }
 
+constexpr float kPi = 3.14159265358979323846f;
+
 }  // namespace
 
 Canvas2D* xt_canvas_by_id(uint64_t id) {
@@ -137,6 +48,20 @@ float CanvasTransform::scale() const {
   return std::sqrt(determinant);
 }
 
+CanvasTransform CanvasTransform::inverted() const {
+  const float determinant = a * d - b * c;
+  if (std::fabs(determinant) < 1e-9f) return CanvasTransform();
+  const float inv = 1.0f / determinant;
+  CanvasTransform result;
+  result.a = d * inv;
+  result.b = -b * inv;
+  result.c = -c * inv;
+  result.d = a * inv;
+  result.e = (c * f - d * e) * inv;
+  result.f = (b * e - a * f) * inv;
+  return result;
+}
+
 Canvas2D::Canvas2D(int width, int height) : id_(g_next_canvas_id.fetch_add(1)) {
   resize(width, height);
   canvas_registry()[id_] = this;
@@ -178,14 +103,17 @@ void Canvas2D::rotate(float radians) {
 void Canvas2D::scale(float sx, float sy) { transform(sx, 0.0f, 0.0f, sy, 0.0f, 0.0f); }
 
 void Canvas2D::transform(float a, float b, float c, float d, float e, float f) {
+  /* Post-multiply: the new matrix applies *after* the current one, so
+   * `translate(x, y); rotate(a)` rotates around the translated origin (the
+   * canvas rules) instead of rotating the translation itself. */
   const CanvasTransform &m = state_.transform;
   CanvasTransform next;
-  next.a = a * m.a + c * m.b;
-  next.b = b * m.a + d * m.b;
-  next.c = a * m.c + c * m.d;
-  next.d = b * m.c + d * m.d;
-  next.e = a * m.e + c * m.f + e;
-  next.f = b * m.e + d * m.f + f;
+  next.a = m.a * a + m.c * b;
+  next.b = m.b * a + m.d * b;
+  next.c = m.a * c + m.c * d;
+  next.d = m.b * c + m.d * d;
+  next.e = m.a * e + m.c * f + m.e;
+  next.f = m.b * e + m.d * f + m.f;
   state_.transform = next;
 }
 
@@ -193,59 +121,6 @@ void Canvas2D::set_transform(float a, float b, float c, float d, float e, float
   state_.transform = CanvasTransform{a, b, c, d, e, f};
 }
 
-void Canvas2D::set_fill_style(const std::string &css) {
-  parse_color_into(css, state_.fill_color, &state_.fill_style);
-}
-
-void Canvas2D::set_stroke_style(const std::string &css) {
-  parse_color_into(css, state_.stroke_color, &state_.stroke_style);
-}
-
-void Canvas2D::set_global_alpha(float alpha) {
-  if (alpha < 0.0f) alpha = 0.0f;
-  if (alpha > 1.0f) alpha = 1.0f;
-  state_.global_alpha = alpha;
-}
-
-void Canvas2D::set_font(const std::string &font) {
-  state_.font = parse_font_string(font);
-  state_.font_string = font;
-}
-
-void Canvas2D::set_text_align(const std::string &value) {
-  std::string lower = lower_ascii(value);
-  if (lower == "start" || lower == "left") {
-    state_.text_align = 0;
-  } else if (lower == "center") {
-    state_.text_align = 1;
-  } else if (lower == "right" || lower == "end") {
-    state_.text_align = 2;
-  } else {
-    return;
-  }
-  state_.text_align_string = lower;
-}
-
-void Canvas2D::set_text_baseline(const std::string &value) {
-  std::string lower = lower_ascii(value);
-  if (lower == "alphabetic") {
-    state_.text_baseline = 0;
-  } else if (lower == "top") {
-    state_.text_baseline = 1;
-  } else if (lower == "middle") {
-    state_.text_baseline = 2;
-  } else if (lower == "bottom") {
-    state_.text_baseline = 3;
-  } else if (lower == "hanging") {
-    state_.text_baseline = 4;
-  } else if (lower == "ideographic") {
-    state_.text_baseline = 5;
-  } else {
-    return;
-  }
-  state_.text_baseline_string = lower;
-}
-
 void Canvas2D::begin_path() { path_.clear(); }
 
 void Canvas2D::move_to(float x, float y) { path_.push_back(CanvasSubpath{CanvasPoint{x, y}}); }
@@ -287,19 +162,74 @@ void Canvas2D::flatten_arc(float cx, float cy, float radius, float start, float
   }
 }
 
-void Canvas2D::arc(float cx, float cy, float radius, float start, float end, bool ccw) {
-  CanvasSubpath arcPoints;
-  flatten_arc(cx, cy, radius, start, end, ccw, &arcPoints);
-  if (arcPoints.empty()) return;
+void Canvas2D::append_path_points(const CanvasSubpath &points) {
+  if (points.empty()) return;
   if (path_.empty() || path_.back().empty()) {
-    path_.push_back(CanvasSubpath{arcPoints.front()});
+    path_.push_back(CanvasSubpath{points.front()});
   } else {
     CanvasPoint last = path_.back().back();
-    if (last.x != arcPoints.front().x || last.y != arcPoints.front().y) {
-      path_.back().push_back(arcPoints.front());
+    if (last.x != points.front().x || last.y != points.front().y) {
+      path_.back().push_back(points.front());
     }
   }
-  for (size_t i = 1; i < arcPoints.size(); i++) path_.back().push_back(arcPoints[i]);
+  for (size_t i = 1; i < points.size(); i++) path_.back().push_back(points[i]);
+}
+
+void Canvas2D::arc(float cx, float cy, float radius, float start, float end, bool ccw) {
+  CanvasSubpath arcPoints;
+  flatten_arc(cx, cy, radius, start, end, ccw, &arcPoints);
+  append_path_points(arcPoints);
+}
+
+void Canvas2D::ellipse(float cx, float cy, float rx, float ry, float rotation, float start,
+                       float end, bool counterclockwise) {
+  float sweep = end - start;
+  if (counterclockwise) {
+    while (sweep > 0.0f) sweep -= 2.0f * kPi;
+    while (sweep < -2.0f * kPi) sweep += 2.0f * kPi;
+  } else {
+    while (sweep < 0.0f) sweep += 2.0f * kPi;
+    while (sweep > 2.0f * kPi) sweep -= 2.0f * kPi;
+  }
+  int segments = (int)std::ceil(std::fabs(sweep) / (kPi / 32.0f));
+  if (segments < 1) segments = 1;
+  if (segments > 2048) segments = 2048;
+  const float cosRotation = std::cos(rotation);
+  const float sinRotation = std::sin(rotation);
+  CanvasSubpath points;
+  points.reserve((size_t)segments + 1);
+  for (int i = 0; i <= segments; i++) {
+    float angle = start + sweep * ((float)i / (float)segments);
+    float px = rx * std::cos(angle);
+    float py = ry * std::sin(angle);
+    points.push_back(CanvasPoint{cx + px * cosRotation - py * sinRotation,
+                                 cy + px * sinRotation + py * cosRotation});
+  }
+  append_path_points(points);
+}
+
+void Canvas2D::round_rect(float x, float y, float width, float height, float radius) {
+  if (width < 0.0f) {
+    x += width;
+    width = -width;
+  }
+  if (height < 0.0f) {
+    y += height;
+    height = -height;
+  }
+  float maxRadius = std::min(width, height) * 0.5f;
+  if (radius < 0.0f) radius = 0.0f;
+  if (radius > maxRadius) radius = maxRadius;
+  move_to(x + radius, y);
+  line_to(x + width - radius, y);
+  quadratic_curve_to(x + width, y, x + width, y + radius);
+  line_to(x + width, y + height - radius);
+  quadratic_curve_to(x + width, y + height, x + width - radius, y + height);
+  line_to(x + radius, y + height);
+  quadratic_curve_to(x, y + height, x, y + height - radius);
+  line_to(x, y + radius);
+  quadratic_curve_to(x, y, x + radius, y);
+  close_path();
 }
 
 void Canvas2D::quadratic_curve_to(float cpx, float cpy, float x, float y) {
@@ -353,6 +283,22 @@ std::vector<CanvasSubpath> Canvas2D::device_subpaths() const {
   return result;
 }
 
+CanvasPaint Canvas2D::make_paint(uint64_t gradient_id, const float color[4]) const {
+  CanvasPaint paint;
+  paint.color = color;
+  paint.gradient = gradient_id == 0 ? nullptr : find_gradient(gradient_id);
+  paint.inverse = state_.transform.inverted();
+  return paint;
+}
+
+CanvasPaint Canvas2D::fill_paint() const {
+  return make_paint(state_.fill_gradient, state_.fill_color);
+}
+
+CanvasPaint Canvas2D::stroke_paint() const {
+  return make_paint(state_.stroke_gradient, state_.stroke_color);
+}
+
 void Canvas2D::fill() {
   std::vector<CanvasSubpath> subpaths = device_subpaths();
   std::vector<CanvasSubpath> loops;
@@ -361,50 +307,19 @@ void Canvas2D::fill() {
     loops.push_back(std::move(subpath));
   }
   if (loops.empty()) return;
-  canvas_detail::fill_loops(image_.pixels, image_.width, image_.height, loops, state_.fill_color,
+  canvas_detail::fill_loops(image_.pixels, image_.width, image_.height, loops, fill_paint(),
                             state_.global_alpha);
   generation_++;
 }
 
-void Canvas2D::stroke_subpath(const CanvasSubpath &points, bool closed, const float color[4]) {
-  if (points.size() < 2) return;
-  float half = state_.line_width * state_.transform.scale() * 0.5f;
-  if (half <= 0.0f) half = 0.5f;
-  size_t segmentCount = points.size() - 1;
-  for (size_t i = 0; i < segmentCount; i++) {
-    const CanvasPoint &p = points[i];
-    const CanvasPoint &q = points[i + 1];
-    float dx = q.x - p.x;
-    float dy = q.y - p.y;
-    float length = std::sqrt(dx * dx + dy * dy);
-    if (length <= 0.0001f) continue;
-    float nx = -dy / length * half;
-    float ny = dx / length * half;
-    CanvasSubpath quad{CanvasPoint{p.x + nx, p.y + ny}, CanvasPoint{q.x + nx, q.y + ny},
-                       CanvasPoint{q.x - nx, q.y - ny}, CanvasPoint{p.x - nx, p.y - ny}};
-    canvas_detail::fill_loop(image_.pixels, image_.width, image_.height, quad, color,
-                             state_.global_alpha);
-  }
-  (void)closed;
-  for (const CanvasPoint &p : points) {
-    CanvasSubpath disc;
-    const int segments = 16;
-    for (int i = 0; i < segments; i++) {
-      float angle = 2.0f * 3.14159265358979323846f * ((float)i / (float)segments);
-      disc.push_back(CanvasPoint{p.x + half * std::cos(angle), p.y + half * std::sin(angle)});
-    }
-    canvas_detail::fill_loop(image_.pixels, image_.width, image_.height, disc, color,
-                             state_.global_alpha);
-  }
-}
-
 void Canvas2D::stroke() {
   std::vector<CanvasSubpath> subpaths = device_subpaths();
+  const CanvasPaint paint = stroke_paint();
   for (const CanvasSubpath &subpath : subpaths) {
     if (subpath.size() < 2) continue;
     bool closed = subpath.size() >= 3 && subpath.front().x == subpath.back().x &&
                   subpath.front().y == subpath.back().y;
-    stroke_subpath(subpath, closed, state_.stroke_color);
+    stroke_subpath(subpath, closed, paint);
   }
   generation_++;
 }
@@ -423,7 +338,7 @@ void Canvas2D::fill_rect(float x, float y, float width, float height) {
     to_device(x, y, &x0, &y0);
     to_device(x + width, y + height, &x1, &y1);
     canvas_detail::fill_rect(image_.pixels, image_.width, image_.height, x0, y0, x1, y1,
-                             state_.fill_color, state_.global_alpha);
+                             fill_paint(), state_.global_alpha);
   } else {
     CanvasSubpath loop;
     const float corners[4][2] = {
@@ -433,7 +348,7 @@ void Canvas2D::fill_rect(float x, float y, float width, float height) {
       to_device(corner[0], corner[1], &point.x, &point.y);
       loop.push_back(point);
     }
-    canvas_detail::fill_loop(image_.pixels, image_.width, image_.height, loop, state_.fill_color,
+    canvas_detail::fill_loop(image_.pixels, image_.width, image_.height, loop, fill_paint(),
                              state_.global_alpha);
   }
   generation_++;
@@ -448,7 +363,7 @@ void Canvas2D::stroke_rect(float x, float y, float width, float height) {
     to_device(corner[0], corner[1], &point.x, &point.y);
     loop.push_back(point);
   }
-  stroke_subpath(loop, true, state_.stroke_color);
+  stroke_subpath(loop, true, stroke_paint());
   generation_++;
 }
 
@@ -456,7 +371,7 @@ float Canvas2D::measure_text(const std::string &text) const {
   return xt_text_measure_width(text, state_.font);
 }
 
-void Canvas2D::paint_text(const std::string &text, float x, float y, const float color[4],
+void Canvas2D::paint_text(const std::string &text, float x, float y, const CanvasPaint &paint,
                           bool stroke) {
   Font *font = xt_text_resolve(state_.font);
   if (font == nullptr) return;
@@ -510,7 +425,7 @@ void Canvas2D::paint_text(const std::string &text, float x, float y, const float
     GlyphImage image;
     if (xt_text_rasterize(face, glyph.glyph, image) && image.width > 0 && image.height > 0) {
       canvas_detail::blit_glyph(image_.pixels, image_.width, image_.height, image.pixels, image.width,
-                                image.height, image.left, image.top, deviceX, deviceY, color,
+                                image.height, image.left, image.top, deviceX, deviceY, paint,
                                 state_.global_alpha);
     }
     penX += glyph.x_advance;
@@ -520,11 +435,11 @@ void Canvas2D::paint_text(const std::string &text, float x, float y, const float
 }
 
 void Canvas2D::fill_text(const std::string &text, float x, float y) {
-  paint_text(text, x, y, state_.fill_color, false);
+  paint_text(text, x, y, fill_paint(), false);
 }
 
 void Canvas2D::stroke_text(const std::string &text, float x, float y) {
-  paint_text(text, x, y, state_.stroke_color, true);
+  paint_text(text, x, y, stroke_paint(), true);
 }
 
 void Canvas2D::draw_image(const Image &source, float dx, float dy, float dw, float dh, float sx,