xbintsc 0.5.36 → 0.5.38

package/runtime/ext_gui/canvas.h

@@ -91,15 +91,41 @@ class CanvasGradient {
   std::vector<Stop> stops_;
 };
 
-/** What a fill or stroke paints with: a solid colour, or a gradient sampled
- * through the inverse of the current transform. `color` points into the
- * canvas state and stays valid for the duration of one draw call. */
+class CanvasGradient;
+class CanvasPattern;
+
+/** What a fill or stroke paints with: a solid colour, a gradient sampled through
+ * the inverse of the current transform, or a repeating image pattern. `color`
+ * points into the canvas state and stays valid for one draw call. */
 struct CanvasPaint {
   const float *color = nullptr;
   const CanvasGradient *gradient = nullptr;
+  const CanvasPattern *pattern = nullptr;
   CanvasTransform inverse;
 };
 
+/**
+ * A `CanvasPattern`: an image tiled in user space with one of the four
+ * repetition modes. Owned by the canvas that created it, like a gradient, so a
+ * stale handle resolves to no pattern instead of a dangling pointer.
+ */
+class CanvasPattern {
+ public:
+  enum class Repeat { Both, X, Y, None };
+
+  CanvasPattern(uint64_t id, const Image &image, Repeat repeat);
+  uint64_t id() const { return id_; }
+  Repeat repeat() const { return repeat_; }
+  /** Pattern colour at a user-space point; false when the point falls outside a
+   * non-repeating pattern (the caller then paints nothing). */
+  bool color_at(float x, float y, float out[4]) const;
+
+ private:
+  uint64_t id_ = 0;
+  Image image_;
+  Repeat repeat_ = Repeat::Both;
+};
+
 class Canvas2D {
  public:
   Canvas2D(int width, int height);
@@ -114,6 +140,10 @@ class Canvas2D {
   /** Resize the bitmap, discarding its contents (the DOM `canvas.width = …`
    * behaviour). */
   void resize(int width, int height);
+  /** `getContextAttributes().alpha`: an opaque canvas clears to opaque black
+   * instead of transparent, as the WebGL/2D context attribute specifies. */
+  void set_alpha(bool alpha);
+  bool alpha() const { return alpha_; }
 
   /* -- state ------------------------------------------------------------- */
   void save();
@@ -138,6 +168,11 @@ class Canvas2D {
   void set_stroke_gradient(uint64_t id);
   uint64_t fill_gradient_id() const { return state_.fill_gradient; }
   uint64_t stroke_gradient_id() const { return state_.stroke_gradient; }
+  /** Use a pattern created by this canvas (`0` restores the solid colour). */
+  void set_fill_pattern(uint64_t id);
+  void set_stroke_pattern(uint64_t id);
+  uint64_t fill_pattern_id() const { return state_.fill_pattern; }
+  uint64_t stroke_pattern_id() const { return state_.stroke_pattern; }
   void set_line_width(float width) { state_.line_width = width > 0.0f ? width : 0.0f; }
   float line_width() const { return state_.line_width; }
   void set_line_cap(const std::string &value);
@@ -165,20 +200,32 @@ class Canvas2D {
                                          float r1);
   CanvasGradient *find_gradient(uint64_t id) const;
 
+  /* -- patterns ---------------------------------------------------------- */
+  /** Create a tiled pattern from `image`; the canvas owns it. */
+  CanvasPattern *create_pattern(const Image &image, CanvasPattern::Repeat repeat);
+  CanvasPattern *find_pattern(uint64_t id) const;
+
   /* -- paths ------------------------------------------------------------- */
   void begin_path();
   void close_path();
   void move_to(float x, float y);
   void line_to(float x, float y);
   void rect(float x, float y, float width, float height);
-  void round_rect(float x, float y, float width, float height, float radius);
+  /** Four corner radii, clockwise from the top-left (CSS/`roundRect` order). */
+  void round_rect(float x, float y, float width, float height, float radius_tl, float radius_tr,
+                  float radius_br, float radius_bl);
   void arc(float cx, float cy, float radius, float start, float end, bool counterclockwise);
   void ellipse(float cx, float cy, float rx, float ry, float rotation, float start, float end,
                bool counterclockwise);
   void quadratic_curve_to(float cpx, float cpy, float x, float y);
   void bezier_curve_to(float c1x, float c1y, float c2x, float c2y, float x, float y);
-  void fill();
+  /** Fill the current path (`even_odd` selects the even-odd rule). */
+  void fill(bool even_odd = false);
   void stroke();
+  /** Fill/stroke a path supplied by the caller (`Path2D`); the points are user
+   * space and are transformed with the current state, like the current path. */
+  void fill_paths(const std::vector<CanvasSubpath> &paths, bool even_odd);
+  void stroke_paths(const std::vector<CanvasSubpath> &paths);
 
   /* -- rectangles -------------------------------------------------------- */
   void clear_rect(float x, float y, float width, float height);
@@ -187,8 +234,11 @@ class Canvas2D {
 
   /* -- text -------------------------------------------------------------- */
   float measure_text(const std::string &text) const;
-  void fill_text(const std::string &text, float x, float y);
-  void stroke_text(const std::string &text, float x, float y);
+  /** Draw text; a positive `max_width` condenses it horizontally so the run is
+   * at most that wide, as the canvas `fillText`/`strokeText` fourth argument
+   * requires. */
+  void fill_text(const std::string &text, float x, float y, float max_width = 0.0f);
+  void stroke_text(const std::string &text, float x, float y, float max_width = 0.0f);
 
   /* -- images ------------------------------------------------------------ */
   /** Draw `source` scaled into the destination rectangle, sampling the source
@@ -196,6 +246,15 @@ class Canvas2D {
   void draw_image(const Image &source, float dx, float dy, float dw, float dh, float sx, float sy,
                   float sw, float sh);
 
+  /* -- pixel writes and export ------------------------------------------- */
+  /** `putImageData`: copy RGBA bytes straight into the bitmap (no transform,
+   * blending or globalAlpha), clipped to the canvas and the optional dirty
+   * rectangle. */
+  void set_image_data(const std::vector<unsigned char> &rgba, int data_width, int data_height,
+                      int dx, int dy, int dirty_x, int dirty_y, int dirty_width, int dirty_height);
+  /** Encode the bitmap as a PNG (used by `toDataURL`/`toBlob`). */
+  bool encode_png(std::vector<unsigned char> *out) const;
+
   /* -- test hook --------------------------------------------------------- */
   /** Copy an `(x, y, w, h)` region to `out` (RGBA8, row-major). Out-of-bounds
    * pixels are transparent. Returns false when the region is empty. */
@@ -223,6 +282,8 @@ class Canvas2D {
     float stroke_color[4] = {0.0f, 0.0f, 0.0f, 1.0f};
     uint64_t fill_gradient = 0;
     uint64_t stroke_gradient = 0;
+    uint64_t fill_pattern = 0;
+    uint64_t stroke_pattern = 0;
     std::string line_cap_string = "butt";
     std::string line_join_string = "miter";
   };
@@ -231,6 +292,8 @@ class Canvas2D {
   void to_device(float x, float y, float *outX, float *outY) const;
   /** The current path transformed into device space. */
   std::vector<CanvasSubpath> device_subpaths() const;
+  /** Any user-space path transformed into device space. */
+  std::vector<CanvasSubpath> device_subpaths_of(const std::vector<CanvasSubpath> &paths) const;
   /** Add one device-space polygon loop to `out`. */
   void flatten_arc(float cx, float cy, float radius, float start, float end, bool ccw,
                    CanvasSubpath *out) const;
@@ -240,7 +303,7 @@ class Canvas2D {
   /** Paint descriptors for the current state. */
   CanvasPaint fill_paint() const;
   CanvasPaint stroke_paint() const;
-  CanvasPaint make_paint(uint64_t gradient_id, const float color[4]) const;
+  CanvasPaint make_paint(uint64_t gradient_id, uint64_t pattern_id, const float color[4]) const;
   void stroke_subpath(const CanvasSubpath &points, bool closed, const CanvasPaint &paint);
   /** Stroke one polyline with caps and joins; `half` is half the device-space
    * line width. Used by `stroke_subpath` for both solid and dashed paths. */
@@ -250,15 +313,17 @@ class Canvas2D {
   void dash_polyline(const CanvasSubpath &points, bool closed,
                      std::vector<CanvasSubpath> *out) const;
   void paint_text(const std::string &text, float x, float y, const CanvasPaint &paint,
-                  bool stroke);
+                  bool stroke, float max_width);
 
   Image image_;
+  bool alpha_ = true;
   uint64_t id_ = 0;
   uint64_t generation_ = 0;
   State state_;
   std::vector<State> stack_;
   std::vector<CanvasSubpath> path_;
   std::unordered_map<uint64_t, std::unique_ptr<CanvasGradient>> gradients_;
+  std::unordered_map<uint64_t, std::unique_ptr<CanvasPattern>> patterns_;
 };
 
 /** The canvas with the given process-wide id, or null. Used by the renderer. */

package/runtime/ext_gui/canvas_image_data.cpp

@@ -0,0 +1,143 @@
+/*
+ * xbintsc GUI engine — `putImageData` and PNG export for `<canvas>`.
+ *
+ * `putImageData` writes RGBA bytes straight into the bitmap: it ignores the
+ * transform, `globalAlpha` and compositing, exactly as the canvas API requires.
+ * PNG export writes the bitmap back out for `toDataURL`/`toBlob`; it uses a
+ * zlib "stored" stream (no compression) so the engine needs no deflate
+ * dependency, which is enough for the small UI snapshots pages take.
+ */
+
+#include "canvas.h"
+
+#include <algorithm>
+#include <cstdint>
+#include <cstring>
+#include <vector>
+
+namespace xtgui {
+
+void Canvas2D::set_image_data(const std::vector<unsigned char> &rgba, int data_width,
+                              int data_height, int dx, int dy, int dirty_x, int dirty_y,
+                              int dirty_width, int dirty_height) {
+  if (data_width <= 0 || data_height <= 0) return;
+  if (rgba.size() < (size_t)data_width * (size_t)data_height * 4) return;
+  int source_x0 = 0;
+  int source_y0 = 0;
+  int source_x1 = data_width;
+  int source_y1 = data_height;
+  /* The optional dirty rectangle is in image coordinates. */
+  if (dirty_width > 0 && dirty_height > 0) {
+    source_x0 = std::max(0, dirty_x);
+    source_y0 = std::max(0, dirty_y);
+    source_x1 = std::min(data_width, dirty_x + dirty_width);
+    source_y1 = std::min(data_height, dirty_y + dirty_height);
+  }
+  if (source_x1 <= source_x0 || source_y1 <= source_y0) return;
+  int dest_x0 = std::max(0, dx + source_x0);
+  int dest_y0 = std::max(0, dy + source_y0);
+  int dest_x1 = std::min(image_.width, dx + source_x1);
+  int dest_y1 = std::min(image_.height, dy + source_y1);
+  for (int py = dest_y0; py < dest_y1; py++) {
+    int source_row = py - dy;
+    const unsigned char *src =
+        rgba.data() + ((size_t)source_row * (size_t)data_width + (size_t)(dest_x0 - dx)) * 4;
+    unsigned char *dst =
+        image_.pixels.data() + ((size_t)py * (size_t)image_.width + (size_t)dest_x0) * 4;
+    memcpy(dst, src, (size_t)(dest_x1 - dest_x0) * 4);
+  }
+  generation_++;
+}
+
+namespace {
+
+uint32_t crc32_update(uint32_t crc, const unsigned char *data, size_t length) {
+  crc = ~crc;
+  for (size_t i = 0; i < length; i++) {
+    crc ^= data[i];
+    for (int bit = 0; bit < 8; bit++) {
+      crc = (crc >> 1) ^ (0xEDB88320u & (uint32_t)(-(int32_t)(crc & 1u)));
+    }
+  }
+  return ~crc;
+}
+
+void append_u32(std::vector<unsigned char> *out, uint32_t value) {
+  out->push_back((unsigned char)(value >> 24));
+  out->push_back((unsigned char)(value >> 16));
+  out->push_back((unsigned char)(value >> 8));
+  out->push_back((unsigned char)value);
+}
+
+void append_chunk(std::vector<unsigned char> *out, const char type[4],
+                  const std::vector<unsigned char> &data) {
+  append_u32(out, (uint32_t)data.size());
+  size_t crc_start = out->size();
+  out->insert(out->end(), type, type + 4);
+  out->insert(out->end(), data.begin(), data.end());
+  uint32_t crc = crc32_update(0, out->data() + crc_start, out->size() - crc_start);
+  append_u32(out, crc);
+}
+
+uint32_t adler32(const std::vector<unsigned char> &data) {
+  uint32_t a = 1;
+  uint32_t b = 0;
+  for (unsigned char byte : data) {
+    a = (a + byte) % 65521u;
+    b = (b + a) % 65521u;
+  }
+  return (b << 16) | a;
+}
+
+/** zlib stream with uncompressed (stored) deflate blocks. */
+std::vector<unsigned char> zlib_store(const std::vector<unsigned char> &data) {
+  std::vector<unsigned char> out;
+  out.push_back(0x78);
+  out.push_back(0x01);
+  size_t offset = 0;
+  do {
+    size_t chunk = std::min<size_t>(65535, data.size() - offset);
+    bool last = offset + chunk >= data.size();
+    out.push_back(last ? 1 : 0);
+    out.push_back((unsigned char)(chunk & 0xFF));
+    out.push_back((unsigned char)(chunk >> 8));
+    out.push_back((unsigned char)(~chunk & 0xFF));
+    out.push_back((unsigned char)((~chunk >> 8) & 0xFF));
+    out.insert(out.end(), data.begin() + offset, data.begin() + offset + chunk);
+    offset += chunk;
+  } while (offset < data.size());
+  append_u32(&out, adler32(data));
+  return out;
+}
+
+}  // namespace
+
+bool Canvas2D::encode_png(std::vector<unsigned char> *out) const {
+  if (out == nullptr || image_.width <= 0 || image_.height <= 0) return false;
+  out->clear();
+  static const unsigned char signature[8] = {0x89, 'P', 'N', 'G', 0x0D, 0x0A, 0x1A, 0x0A};
+  out->insert(out->end(), signature, signature + 8);
+
+  std::vector<unsigned char> header;
+  append_u32(&header, (uint32_t)image_.width);
+  append_u32(&header, (uint32_t)image_.height);
+  header.push_back(8);  // bit depth
+  header.push_back(6);  // colour type: RGBA
+  header.push_back(0);  // compression
+  header.push_back(0);  // filter
+  header.push_back(0);  // interlace
+  append_chunk(out, "IHDR", header);
+
+  std::vector<unsigned char> raw;
+  raw.reserve(((size_t)image_.width * 4 + 1) * (size_t)image_.height);
+  for (int y = 0; y < image_.height; y++) {
+    raw.push_back(0);  // filter type: none
+    const unsigned char *row = image_.pixels.data() + (size_t)y * (size_t)image_.width * 4;
+    raw.insert(raw.end(), row, row + (size_t)image_.width * 4);
+  }
+  append_chunk(out, "IDAT", zlib_store(raw));
+  append_chunk(out, "IEND", std::vector<unsigned char>());
+  return true;
+}
+
+}  // namespace xtgui

package/runtime/ext_gui/canvas_internal.h

@@ -24,13 +24,14 @@ void blend_pixel(unsigned char *pixel, const float color[4], float coverage, flo
 /** Fill one closed polygon loop (already in device space) with `paint`,
  * anti-aliased, blending source-over. */
 void fill_loop(std::vector<unsigned char> &pixels, int width, int height,
-               const std::vector<CanvasPoint> &loop, const CanvasPaint &paint, float alpha);
+               const std::vector<CanvasPoint> &loop, const CanvasPaint &paint, float alpha,
+               bool even_odd = false);
 
 /** Fill several loops as one path with the nonzero winding rule (so a contour
- * inside another punches a hole). */
+ * inside another punches a hole), or the even-odd rule. */
 void fill_loops(std::vector<unsigned char> &pixels, int width, int height,
                 const std::vector<std::vector<CanvasPoint>> &loops, const CanvasPaint &paint,
-                float alpha);
+                float alpha, bool even_odd = false);
 
 /** Fill a device-space axis-aligned rectangle, anti-aliased. Used by the
  * `fillRect`/`clearRect` fast path when the transform preserves axis
@@ -58,10 +59,12 @@ void draw_image_affine(std::vector<unsigned char> &pixels, int width, int height
                        float sy, float sw, float sh, const CanvasTransform &transform,
                        float alpha);
 
-/** Composite one grayscale glyph bitmap at `(x, baselineY)` with `paint`. */
+/** Composite one grayscale glyph bitmap at `(x, baselineY)` with `paint`.
+ * `scale_x` < 1 condenses the bitmap horizontally (`fillText`'s `maxWidth`). */
 void blit_glyph(std::vector<unsigned char> &pixels, int width, int height,
                 const std::vector<unsigned char> &glyph, int glyphWidth, int glyphHeight, int left,
-                int top, float x, float baselineY, const CanvasPaint &paint, float alpha);
+                int top, float x, float baselineY, float scale_x, const CanvasPaint &paint,
+                float alpha);
 
 }  // namespace canvas_detail
 }  // namespace xtgui

package/runtime/ext_gui/canvas_pattern.cpp

@@ -0,0 +1,90 @@
+/*
+ * xbintsc GUI engine — `CanvasPattern`.
+ *
+ * A pattern is an image tiled in user space with the four repetition modes.
+ * Like a gradient it is owned by the canvas that created it (and addressed by
+ * id), so a stale context handle resolves to "no pattern" instead of a dangling
+ * pointer. The rasteriser samples it through the inverse transform, which keeps
+ * the tiles attached to the shape when it is translated, scaled or rotated.
+ */
+
+#include "canvas.h"
+
+#include <atomic>
+#include <cmath>
+#include <memory>
+
+#include "canvas_internal.h"
+
+namespace xtgui {
+
+namespace {
+
+std::atomic<uint64_t> g_next_pattern_id{1};
+
+}  // namespace
+
+CanvasPattern::CanvasPattern(uint64_t id, const Image &image, Repeat repeat)
+    : id_(id), image_(image), repeat_(repeat) {}
+
+bool CanvasPattern::color_at(float x, float y, float out[4]) const {
+  const int width = image_.width;
+  const int height = image_.height;
+  if (width <= 0 || height <= 0) return false;
+  /* Tile in user space: wrap the coordinate into one tile for the enabled
+   * axes, and reject points outside the tile for the disabled ones. */
+  bool repeatX = repeat_ == Repeat::Both || repeat_ == Repeat::X;
+  bool repeatY = repeat_ == Repeat::Both || repeat_ == Repeat::Y;
+  float u = x;
+  float v = y;
+  if (repeatX) {
+    u = x - std::floor(x / (float)width) * (float)width;
+    if (u < 0.0f) u += (float)width;
+  } else if (x < 0.0f || x >= (float)width) {
+    return false;
+  }
+  if (repeatY) {
+    v = y - std::floor(y / (float)height) * (float)height;
+    if (v < 0.0f) v += (float)height;
+  } else if (y < 0.0f || y >= (float)height) {
+    return false;
+  }
+  int px = (int)u;
+  int py = (int)v;
+  if (px < 0) px = 0;
+  if (py < 0) py = 0;
+  if (px >= width) px = width - 1;
+  if (py >= height) py = height - 1;
+  const unsigned char *texel =
+      image_.pixels.data() + ((size_t)py * (size_t)width + (size_t)px) * 4;
+  out[0] = (float)texel[0] / 255.0f;
+  out[1] = (float)texel[1] / 255.0f;
+  out[2] = (float)texel[2] / 255.0f;
+  out[3] = (float)texel[3] / 255.0f;
+  return true;
+}
+
+CanvasPattern *Canvas2D::create_pattern(const Image &image, CanvasPattern::Repeat repeat) {
+  auto pattern =
+      std::make_unique<CanvasPattern>(g_next_pattern_id.fetch_add(1), image, repeat);
+  CanvasPattern *raw = pattern.get();
+  patterns_[raw->id()] = std::move(pattern);
+  return raw;
+}
+
+CanvasPattern *Canvas2D::find_pattern(uint64_t id) const {
+  auto found = patterns_.find(id);
+  return found == patterns_.end() ? nullptr : found->second.get();
+}
+
+void Canvas2D::set_fill_pattern(uint64_t id) {
+  state_.fill_pattern = find_pattern(id) != nullptr ? id : 0;
+  if (state_.fill_pattern != 0) state_.fill_gradient = 0;
+}
+
+void Canvas2D::set_stroke_pattern(uint64_t id) {
+  state_.stroke_pattern = find_pattern(id) != nullptr ? id : 0;
+  if (state_.stroke_pattern != 0) state_.stroke_gradient = 0;
+}
+
+}  // namespace xtgui

package/runtime/ext_gui/canvas_raster.cpp

@@ -37,11 +37,15 @@ struct Crossing {
 /** Resolve `paint` at a device-space pixel centre. Gradients are defined in
  * user space, so the pixel is mapped back through the inverse transform. */
 void paint_color_at(const CanvasPaint &paint, float x, float y, float out[4]) {
-  if (paint.gradient != nullptr) {
+  if (paint.pattern != nullptr || paint.gradient != nullptr) {
     const CanvasTransform &inverse = paint.inverse;
     float userX = inverse.a * x + inverse.c * y + inverse.e;
     float userY = inverse.b * x + inverse.d * y + inverse.f;
-    if (paint.gradient->color_at(userX, userY, out)) return;
+    if (paint.pattern != nullptr) {
+      if (paint.pattern->color_at(userX, userY, out)) return;
+    } else if (paint.gradient->color_at(userX, userY, out)) {
+      return;
+    }
   }
   if (paint.color != nullptr) {
     for (int i = 0; i < 4; i++) out[i] = paint.color[i];
@@ -100,7 +104,7 @@ static void add_span(float *row, int rowOriginX, float xa, float xb, float weigh
 
 void fill_loops(std::vector<unsigned char> &pixels, int width, int height,
                 const std::vector<std::vector<CanvasPoint>> &loops, const CanvasPaint &paint,
-                float alpha) {
+                float alpha, bool even_odd) {
   if (width <= 0 || height <= 0 || loops.empty()) return;
   bool havePoint = false;
   float minX = 0.0f, maxX = 0.0f, minY = 0.0f, maxY = 0.0f;
@@ -154,6 +158,14 @@ void fill_loops(std::vector<unsigned char> &pixels, int width, int height,
       if (crossings.empty()) continue;
       std::sort(crossings.begin(), crossings.end(),
                 [](const Crossing &a, const Crossing &b) { return a.x < b.x; });
+      if (even_odd) {
+        /* Every second crossing toggles the covered span, regardless of the
+         * direction each contour is wound. */
+        for (size_t i = 0; i + 1 < crossings.size(); i += 2) {
+          add_span(row, x0, crossings[i].x, crossings[i + 1].x, weight, x0, x1);
+        }
+        continue;
+      }
       int winding = 0;
       float spanStart = 0.0f;
       for (const Crossing &crossing : crossings) {
@@ -179,8 +191,10 @@ void fill_loops(std::vector<unsigned char> &pixels, int width, int height,
 }
 
 void fill_loop(std::vector<unsigned char> &pixels, int width, int height,
-               const std::vector<CanvasPoint> &loop, const CanvasPaint &paint, float alpha) {
-  fill_loops(pixels, width, height, std::vector<std::vector<CanvasPoint>>{loop}, paint, alpha);
+               const std::vector<CanvasPoint> &loop, const CanvasPaint &paint, float alpha,
+               bool even_odd) {
+  fill_loops(pixels, width, height, std::vector<std::vector<CanvasPoint>>{loop}, paint, alpha,
+             even_odd);
 }
 
 void fill_rect(std::vector<unsigned char> &pixels, int width, int height, float x0, float y0,
@@ -331,16 +345,24 @@ void draw_image_affine(std::vector<unsigned char> &pixels, int width, int height
 
 void blit_glyph(std::vector<unsigned char> &pixels, int width, int height,
                 const std::vector<unsigned char> &glyph, int glyphWidth, int glyphHeight, int left,
-                int top, float x, float baselineY, const CanvasPaint &paint, float alpha) {
-  int originX = (int)std::lround(x) + left;
+                int top, float x, float baselineY, float scale_x, const CanvasPaint &paint,
+                float alpha) {
+  if (glyphWidth <= 0 || glyphHeight <= 0) return;
+  if (scale_x <= 0.0f) scale_x = 1.0f;
+  bool condense = scale_x < 0.999f;
+  int drawWidth = condense ? std::max(1, (int)std::lround((float)glyphWidth * scale_x))
+                           : glyphWidth;
+  int originX = (int)std::lround(x) + (int)std::lround((float)left * scale_x);
   int originY = (int)std::lround(baselineY) - top;
   for (int gy = 0; gy < glyphHeight; gy++) {
     int py = originY + gy;
     if (py < 0 || py >= height) continue;
-    for (int gx = 0; gx < glyphWidth; gx++) {
+    for (int gx = 0; gx < drawWidth; gx++) {
       int px = originX + gx;
       if (px < 0 || px >= width) continue;
-      float coverage = glyph[(size_t)gy * (size_t)glyphWidth + (size_t)gx] / 255.0f;
+      /* Nearest sample from the glyph coverage mask when condensing. */
+      int sourceX = condense ? std::min(glyphWidth - 1, (int)((float)gx / scale_x)) : gx;
+      float coverage = glyph[(size_t)gy * (size_t)glyphWidth + (size_t)sourceX] / 255.0f;
       if (coverage <= 0.0f) continue;
       float color[4];
       paint_color_at(paint, (float)px + 0.5f, (float)py + 0.5f, color);

package/runtime/ext_gui/canvas_style.cpp

@@ -112,11 +112,13 @@ bool positive_finite(float value) { return std::isfinite(value) && value >= 0.0f
 void Canvas2D::set_fill_style(const std::string &css) {
   parse_color_into(css, state_.fill_color, &state_.fill_style);
   state_.fill_gradient = 0;
+  state_.fill_pattern = 0;
 }
 
 void Canvas2D::set_stroke_style(const std::string &css) {
   parse_color_into(css, state_.stroke_color, &state_.stroke_style);
   state_.stroke_gradient = 0;
+  state_.stroke_pattern = 0;
 }
 
 void Canvas2D::set_fill_gradient(uint64_t id) {
@@ -124,7 +126,7 @@ void Canvas2D::set_fill_gradient(uint64_t id) {
     state_.fill_gradient = 0;
     return;
   }
-  if (find_gradient(id) != nullptr) state_.fill_gradient = id;
+  if (find_gradient(id) != nullptr) { state_.fill_gradient = id; state_.fill_pattern = 0; }
 }
 
 void Canvas2D::set_stroke_gradient(uint64_t id) {
@@ -132,7 +134,7 @@ void Canvas2D::set_stroke_gradient(uint64_t id) {
     state_.stroke_gradient = 0;
     return;
   }
-  if (find_gradient(id) != nullptr) state_.stroke_gradient = id;
+  if (find_gradient(id) != nullptr) { state_.stroke_gradient = id; state_.stroke_pattern = 0; }
 }
 
 void Canvas2D::set_global_alpha(float alpha) {

package/runtime/ext_gui/dom.h

@@ -31,6 +31,10 @@ struct Node {
   NodeType type = NodeType::Element;
   std::string tag;   // lowercased element name (empty for document/text)
   std::string text;  // text content (text nodes only)
+  /* `createElementNS` keeps the namespace and the qualified name's prefix.
+   * Ordinary HTML elements leave both empty and report the XHTML namespace. */
+  std::string ns;
+  std::string ns_prefix;
   std::vector<Attr> attrs;
   Node *parent = nullptr;
   std::vector<std::unique_ptr<Node>> children;

package/runtime/ext_gui/dom_api.cpp

@@ -32,6 +32,7 @@ xt_value g_document_proto = XT_UNDEFINED;
 xt_value g_event_proto = XT_UNDEFINED;
 xt_value g_class_list_proto = XT_UNDEFINED;
 xt_value g_style_proto = XT_UNDEFINED;
+xt_value g_computed_style_proto = XT_UNDEFINED;
 xt_value g_canvas_proto = XT_UNDEFINED;
 xt_value g_canvas_gradient_proto = XT_UNDEFINED;