add custom repeat-x/y processing

Automattic · Jun 28, 2022 · dffb7f5 · dffb7f5
1 parent 9d8da5b
commit dffb7f5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/src/CanvasRenderingContext2d.cc b/src/CanvasRenderingContext2d.cc
@@ -367,6 +367,7 @@ Context2d::setFillRule(v8::Local<v8::Value> value) {
 void
 Context2d::fill(bool preserve) {
   cairo_pattern_t *new_pattern;
+  bool needsRestore = false;
   if (state->fillPattern) {
     if (state->globalAlpha < 1) {
       new_pattern = create_transparent_pattern(state->fillPattern, state->globalAlpha);
@@ -381,10 +382,35 @@ Context2d::fill(bool preserve) {
       cairo_set_source(_context, state->fillPattern);
     }
     repeat_type_t repeat = Pattern::get_repeat_type_for_cairo_pattern(state->fillPattern);
-    if (NO_REPEAT == repeat) {
+    if (repeat == NO_REPEAT) {
       cairo_pattern_set_extend(cairo_get_source(_context), CAIRO_EXTEND_NONE);
+    } else if (repeat == REPEAT) {
+      cairo_pattern_set_extend(cairo_get_source(_context), CAIRO_EXTEND_REPEAT);
     } else {
+      cairo_save(_context);
+      cairo_path_t *savedPath = cairo_copy_path(_context);
+      cairo_surface_t *patternSurface = nullptr;
+      cairo_pattern_get_surface(cairo_get_source(_context), &patternSurface);
+
+      double width, height;
+      if (repeat == REPEAT_X) {
+        double x1, x2;
+        cairo_path_extents(_context, &x1, nullptr, &x2, nullptr);
+        width = x2 - x1;
+        height = cairo_image_surface_get_height(patternSurface);
+      } else {
+        double y1, y2;
+        cairo_path_extents(_context, nullptr, &y1, nullptr, &y2);
+        width = cairo_image_surface_get_width(patternSurface);
+        height = y2 - y1;
+      }
+
+      cairo_new_path(_context);
+      cairo_rectangle(_context, 0, 0, width, height);
+      cairo_clip(_context);
+      cairo_append_path(_context, savedPath);
       cairo_pattern_set_extend(cairo_get_source(_context), CAIRO_EXTEND_REPEAT);
+      needsRestore = true;
     }
   } else if (state->fillGradient) {
     if (state->globalAlpha < 1) {
@@ -412,6 +438,9 @@ Context2d::fill(bool preserve) {
       ? shadow(cairo_fill)
       : cairo_fill(_context);
   }
+  if (needsRestore) {
+    cairo_restore(_context);
+  }
 }
 
 /*

diff --git a/test/public/tests.js b/test/public/tests.js
@@ -471,6 +471,24 @@ tests['createPattern() with globalAlpha'] = function (ctx, done) {
   img.src = imageSrc('face.jpeg')
 }
 
+tests["createPattern() repeat-x and repeat-y"] = function (ctx, done) {
+  const img = new Image()
+  img.onload = function () {
+    ctx.scale(0.1, 0.1)
+    ctx.lineStyle = "black"
+    ctx.lineWidth = 10
+    ctx.fillStyle = ctx.createPattern(img, "repeat-x")
+    ctx.fillRect(0, 0, 900, 900)
+    ctx.strokeRect(0, 0, 900, 900)
+    ctx.translate(1000, 1000)
+    ctx.fillStyle = ctx.createPattern(img, "repeat-y")
+    ctx.fillRect(0, 0, 900, 900)
+    ctx.strokeRect(0, 0, 900, 900)
+    done()
+  };
+  img.src = imageSrc("face.jpeg")
+}
+
 tests['createPattern() no-repeat'] = function (ctx, done) {
   const img = new Image()
   img.onload = function () {