xbintsc 0.5.36 → 0.5.37

package/runtime/ext_gui/canvas.cpp

@@ -85,9 +85,20 @@ void Canvas2D::resize(int width, int height) {
   image_.width = width;
   image_.height = height;
   image_.pixels.assign((size_t)width * (size_t)height * 4, 0);
+  if (!alpha_) {
+    /* `{ alpha: false }`: the canvas has an opaque black backdrop, so cleared
+     * pixels are black rather than transparent. */
+    for (size_t i = 3; i < image_.pixels.size(); i += 4) image_.pixels[i] = 255;
+  }
   generation_++;
 }
 
+void Canvas2D::set_alpha(bool alpha) {
+  if (alpha_ == alpha) return;
+  alpha_ = alpha;
+  resize(image_.width, image_.height);
+}
+
 void Canvas2D::save() { stack_.push_back(state_); }
 
 void Canvas2D::restore() {
@@ -214,7 +225,8 @@ void Canvas2D::ellipse(float cx, float cy, float rx, float ry, float rotation, f
   append_path_points(points);
 }
 
-void Canvas2D::round_rect(float x, float y, float width, float height, float radius) {
+void Canvas2D::round_rect(float x, float y, float width, float height, float radius_tl,
+                          float radius_tr, float radius_br, float radius_bl) {
   if (width < 0.0f) {
     x += width;
     width = -width;
@@ -223,18 +235,25 @@ void Canvas2D::round_rect(float x, float y, float width, float height, float rad
     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);
+  const float maxRadius = std::min(width, height) * 0.5f;
+  float radii[4] = {radius_tl, radius_tr, radius_br, radius_bl};
+  for (float &radius : radii) {
+    if (radius < 0.0f) radius = 0.0f;
+    if (radius > maxRadius) radius = maxRadius;
+  }
+  const float tl = radii[0];
+  const float tr = radii[1];
+  const float br = radii[2];
+  const float bl = radii[3];
+  move_to(x + tl, y);
+  line_to(x + width - tr, y);
+  quadratic_curve_to(x + width, y, x + width, y + tr);
+  line_to(x + width, y + height - br);
+  quadratic_curve_to(x + width, y + height, x + width - br, y + height);
+  line_to(x + bl, y + height);
+  quadratic_curve_to(x, y + height, x, y + height - bl);
+  line_to(x, y + tl);
+  quadratic_curve_to(x, y, x + tl, y);
   close_path();
 }
 
@@ -274,9 +293,14 @@ void Canvas2D::to_device(float x, float y, float *outX, float *outY) const {
 }
 
 std::vector<CanvasSubpath> Canvas2D::device_subpaths() const {
+  return device_subpaths_of(path_);
+}
+
+std::vector<CanvasSubpath> Canvas2D::device_subpaths_of(
+    const std::vector<CanvasSubpath> &paths) const {
   std::vector<CanvasSubpath> result;
-  result.reserve(path_.size());
-  for (const CanvasSubpath &subpath : path_) {
+  result.reserve(paths.size());
+  for (const CanvasSubpath &subpath : paths) {
     CanvasSubpath device;
     device.reserve(subpath.size());
     for (const CanvasPoint &point : subpath) {
@@ -289,23 +313,25 @@ std::vector<CanvasSubpath> Canvas2D::device_subpaths() const {
   return result;
 }
 
-CanvasPaint Canvas2D::make_paint(uint64_t gradient_id, const float color[4]) const {
+CanvasPaint Canvas2D::make_paint(uint64_t gradient_id, uint64_t pattern_id,
+                                 const float color[4]) const {
   CanvasPaint paint;
   paint.color = color;
   paint.gradient = gradient_id == 0 ? nullptr : find_gradient(gradient_id);
+  paint.pattern = pattern_id == 0 ? nullptr : find_pattern(pattern_id);
   paint.inverse = state_.transform.inverted();
   return paint;
 }
 
 CanvasPaint Canvas2D::fill_paint() const {
-  return make_paint(state_.fill_gradient, state_.fill_color);
+  return make_paint(state_.fill_gradient, state_.fill_pattern, state_.fill_color);
 }
 
 CanvasPaint Canvas2D::stroke_paint() const {
-  return make_paint(state_.stroke_gradient, state_.stroke_color);
+  return make_paint(state_.stroke_gradient, state_.stroke_pattern, state_.stroke_color);
 }
 
-void Canvas2D::fill() {
+void Canvas2D::fill(bool even_odd) {
   std::vector<CanvasSubpath> subpaths = device_subpaths();
   std::vector<CanvasSubpath> loops;
   for (CanvasSubpath &subpath : subpaths) {
@@ -314,7 +340,20 @@ void Canvas2D::fill() {
   }
   if (loops.empty()) return;
   canvas_detail::fill_loops(image_.pixels, image_.width, image_.height, loops, fill_paint(),
-                            state_.global_alpha);
+                            state_.global_alpha, even_odd);
+  generation_++;
+}
+
+void Canvas2D::fill_paths(const std::vector<CanvasSubpath> &paths, bool even_odd) {
+  std::vector<CanvasSubpath> subpaths = device_subpaths_of(paths);
+  std::vector<CanvasSubpath> loops;
+  for (CanvasSubpath &subpath : subpaths) {
+    if (subpath.size() < 3) continue;
+    loops.push_back(std::move(subpath));
+  }
+  if (loops.empty()) return;
+  canvas_detail::fill_loops(image_.pixels, image_.width, image_.height, loops, fill_paint(),
+                            state_.global_alpha, even_odd);
   generation_++;
 }
 
@@ -330,6 +369,18 @@ void Canvas2D::stroke() {
   generation_++;
 }
 
+void Canvas2D::stroke_paths(const std::vector<CanvasSubpath> &paths) {
+  std::vector<CanvasSubpath> subpaths = device_subpaths_of(paths);
+  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, paint);
+  }
+  generation_++;
+}
+
 void Canvas2D::clear_rect(float x, float y, float width, float height) {
   float x0, y0, x1, y1;
   to_device(x, y, &x0, &y0);
@@ -378,7 +429,7 @@ float Canvas2D::measure_text(const std::string &text) const {
 }
 
 void Canvas2D::paint_text(const std::string &text, float x, float y, const CanvasPaint &paint,
-                          bool stroke) {
+                          bool stroke, float max_width) {
   Font *font = xt_text_resolve(state_.font);
   if (font == nullptr) return;
   std::vector<ShapedGlyph> glyphs;
@@ -386,11 +437,18 @@ void Canvas2D::paint_text(const std::string &text, float x, float y, const Canva
   float ascent = 0.0f, descent = 0.0f, lineHeight = 0.0f;
   xt_text_metrics(state_.font, &ascent, &descent, &lineHeight);
 
+  /* The optional `maxWidth` condenses the run horizontally instead of clipping
+   * it: advances and glyph bitmaps are squeezed by the same factor. */
+  float horizontal = 1.0f;
+  if (max_width > 0.0f && width > max_width && width > 0.0001f) {
+    horizontal = max_width / width;
+  }
+
   float originX = x;
   if (state_.text_align == 1) {
-    originX -= width * 0.5f;
+    originX -= width * horizontal * 0.5f;
   } else if (state_.text_align == 2) {
-    originX -= width;
+    originX -= width * horizontal;
   }
   float originY = y;
   switch (state_.text_baseline) {
@@ -419,7 +477,7 @@ void Canvas2D::paint_text(const std::string &text, float x, float y, const Canva
 
   float penX = 0.0f;
   for (const ShapedGlyph &glyph : glyphs) {
-    float userX = originX + penX + glyph.x_offset;
+    float userX = originX + (penX + glyph.x_offset) * horizontal;
     float userY = originY + glyph.y_offset;
     float deviceX = 0.0f, deviceY = 0.0f;
     to_device(userX, userY, &deviceX, &deviceY);
@@ -431,8 +489,8 @@ void Canvas2D::paint_text(const std::string &text, float x, float y, const Canva
     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, paint,
-                                state_.global_alpha);
+                                image.height, image.left, image.top, deviceX, deviceY, horizontal,
+                                paint, state_.global_alpha);
     }
     penX += glyph.x_advance;
   }
@@ -440,12 +498,12 @@ void Canvas2D::paint_text(const std::string &text, float x, float y, const Canva
   generation_++;
 }
 
-void Canvas2D::fill_text(const std::string &text, float x, float y) {
-  paint_text(text, x, y, fill_paint(), false);
+void Canvas2D::fill_text(const std::string &text, float x, float y, float max_width) {
+  paint_text(text, x, y, fill_paint(), false, max_width);
 }
 
-void Canvas2D::stroke_text(const std::string &text, float x, float y) {
-  paint_text(text, x, y, stroke_paint(), true);
+void Canvas2D::stroke_text(const std::string &text, float x, float y, float max_width) {
+  paint_text(text, x, y, stroke_paint(), true, max_width);
 }
 
 void Canvas2D::draw_image(const Image &source, float dx, float dy, float dw, float dh, float sx,

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