LibWeb: Implement support for drawing with CanvasPattern

We already had the API, but drawing to the canvas was not affected by
any created CanvasPattern. This moves CanvasPatternPaintStyle to LibGfx
so we don't have to reach into LibWeb, and implements the plumbing to
let Skia use images as a fill pattern.

Libraries/LibGfx/PaintStyle.h

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,6 +14,7 @@
 #include <LibGfx/Color.h>
 #include <LibGfx/Forward.h>
 #include <LibGfx/Gradients.h>
+#include <LibGfx/ImmutableBitmap.h>
 #include <LibGfx/Rect.h>
 
 namespace Gfx {
@@ -78,6 +80,34 @@ private:
     Optional<float> m_repeat_length;
 };
 
+class CanvasPatternPaintStyle : public PaintStyle {
+public:
+    enum class Repetition : u8 {
+        Repeat,
+        RepeatX,
+        RepeatY,
+        NoRepeat
+    };
+
+    static ErrorOr<NonnullRefPtr<CanvasPatternPaintStyle>> create(RefPtr<ImmutableBitmap> image, Repetition repetition)
+    {
+        return adopt_nonnull_ref_or_enomem(new (nothrow) CanvasPatternPaintStyle(image, repetition));
+    }
+
+    RefPtr<ImmutableBitmap> image() const { return m_image; }
+    Repetition repetition() const { return m_repetition; }
+
+private:
+    CanvasPatternPaintStyle(RefPtr<ImmutableBitmap> image, Repetition repetition)
+        : m_image(image)
+        , m_repetition(repetition)
+    {
+    }
+
+    RefPtr<ImmutableBitmap> m_image;
+    Repetition m_repetition { Repetition::Repeat };
+};
+
 // The following paint styles implement the gradients required for the HTML canvas.
 // These gradients are (unlike CSS ones) not relative to the painted shape, and do not
 // support premultiplied alpha.

Libraries/LibGfx/PainterSkia.cpp

@@ -2,26 +2,30 @@
  * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2024-2025, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
  * Copyright (c) 2024, Lucien Fiorini <lucienfiorini@gmail.com>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #define AK_DONT_REPLACE_STD
 
+#include <AK/GenericShorthands.h>
 #include <AK/OwnPtr.h>
 #include <AK/String.h>
+#include <AK/TypeCasts.h>
 #include <LibGfx/Filter.h>
 #include <LibGfx/ImmutableBitmap.h>
 #include <LibGfx/PainterSkia.h>
 #include <LibGfx/PathSkia.h>
 #include <LibGfx/SkiaUtils.h>
 
-#include <AK/TypeCasts.h>
 #include <core/SkCanvas.h>
 #include <core/SkPath.h>
+#include <core/SkPathEffect.h>
 #include <effects/SkBlurMaskFilter.h>
 #include <effects/SkDashPathEffect.h>
 #include <effects/SkGradientShader.h>
+#include <include/core/SkImage.h>
 
 namespace Gfx {
 
@@ -43,14 +47,12 @@ struct PainterSkia::Impl {
     }
 };
 
-static void apply_paint_style(SkPaint& paint, Gfx::PaintStyle const& style)
+static void apply_paint_style(SkPaint& paint, PaintStyle const& style)
 {
-    if (is<Gfx::SolidColorPaintStyle>(style)) {
-        auto const& solid_color = static_cast<Gfx::SolidColorPaintStyle const&>(style);
-        paint.setColor(to_skia_color(solid_color.color()));
-    } else if (is<Gfx::CanvasLinearGradientPaintStyle>(style)) {
-        auto const& linear_gradient = static_cast<Gfx::CanvasLinearGradientPaintStyle const&>(style);
-        auto const& color_stops = linear_gradient.color_stops();
+    if (auto const& solid_color = as_if<SolidColorPaintStyle>(style)) {
+        paint.setColor(to_skia_color(solid_color->color()));
+    } else if (auto const& linear_gradient = as_if<Gfx::CanvasLinearGradientPaintStyle>(style)) {
+        auto const& color_stops = linear_gradient->color_stops();
 
         Vector<SkColor> colors;
         colors.ensure_capacity(color_stops.size());
@@ -61,16 +63,13 @@ static void apply_paint_style(SkPaint& paint, Gfx::PaintStyle const& style)
             positions.append(color_stop.position);
         }
 
-        Array<SkPoint, 2> points;
-        points[0] = to_skia_point(linear_gradient.start_point());
-        points[1] = to_skia_point(linear_gradient.end_point());
+        Array points { to_skia_point(linear_gradient->start_point()), to_skia_point(linear_gradient->end_point()) };
 
         SkMatrix matrix;
         auto shader = SkGradientShader::MakeLinear(points.data(), colors.data(), positions.data(), color_stops.size(), SkTileMode::kClamp, 0, &matrix);
         paint.setShader(shader);
-    } else if (is<Gfx::CanvasRadialGradientPaintStyle>(style)) {
-        auto const& radial_gradient = static_cast<Gfx::CanvasRadialGradientPaintStyle const&>(style);
-        auto const& color_stops = radial_gradient.color_stops();
+    } else if (auto const* radial_gradient = as_if<CanvasRadialGradientPaintStyle>(style)) {
+        auto const& color_stops = radial_gradient->color_stops();
 
         Vector<SkColor> colors;
         colors.ensure_capacity(color_stops.size());
@@ -81,10 +80,10 @@ static void apply_paint_style(SkPaint& paint, Gfx::PaintStyle const& style)
             positions.append(color_stop.position);
         }
 
-        auto start_center = radial_gradient.start_center();
-        auto end_center = radial_gradient.end_center();
-        auto start_radius = radial_gradient.start_radius();
-        auto end_radius = radial_gradient.end_radius();
+        auto start_center = radial_gradient->start_center();
+        auto end_center = radial_gradient->end_center();
+        auto start_radius = radial_gradient->start_radius();
+        auto end_radius = radial_gradient->end_radius();
 
         auto start_sk_point = to_skia_point(start_center);
         auto end_sk_point = to_skia_point(end_center);
@@ -92,6 +91,26 @@ static void apply_paint_style(SkPaint& paint, Gfx::PaintStyle const& style)
         SkMatrix matrix;
         auto shader = SkGradientShader::MakeTwoPointConical(start_sk_point, start_radius, end_sk_point, end_radius, colors.data(), positions.data(), color_stops.size(), SkTileMode::kClamp, 0, &matrix);
         paint.setShader(shader);
+    } else if (auto const* canvas_pattern = as_if<CanvasPatternPaintStyle>(style)) {
+        auto image = canvas_pattern->image();
+        if (!image)
+            return;
+        auto const* sk_image = image->sk_image();
+
+        auto repetition = canvas_pattern->repetition();
+        auto repeat_x = first_is_one_of(repetition, CanvasPatternPaintStyle::Repetition::Repeat, CanvasPatternPaintStyle::Repetition::RepeatX);
+        auto repeat_y = first_is_one_of(repetition, CanvasPatternPaintStyle::Repetition::Repeat, CanvasPatternPaintStyle::Repetition::RepeatY);
+
+        // FIXME: Implement sampling configuration.
+        SkSamplingOptions sk_sampling_options { SkFilterMode::kLinear };
+
+        auto shader = sk_image->makeShader(
+            repeat_x ? SkTileMode::kRepeat : SkTileMode::kDecal,
+            repeat_y ? SkTileMode::kRepeat : SkTileMode::kDecal,
+            sk_sampling_options);
+        paint.setShader(shader);
+    } else {
+        dbgln("FIXME: Unsupported PaintStyle");
     }
 }
 

Libraries/LibGfx/PainterSkia.h

@@ -7,7 +7,6 @@
 #pragma once
 
 #include <AK/NonnullOwnPtr.h>
-#include <LibGfx/Bitmap.h>
 #include <LibGfx/CompositingAndBlendingOperator.h>
 #include <LibGfx/Painter.h>
 #include <LibGfx/PaintingSurface.h>

Libraries/LibGfx/SkiaUtils.h

@@ -1,6 +1,7 @@
 /*
  * Copyright (c) 2024, Pavel Shliak <shlyakpavel@gmail.com>
  * Copyright (c) 2024, Lucien Fiorini <lucienfiorini@gmail.com>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -11,6 +12,7 @@
 #include <LibGfx/Bitmap.h>
 #include <LibGfx/CompositingAndBlendingOperator.h>
 #include <LibGfx/Filter.h>
+#include <LibGfx/PaintStyle.h>
 #include <LibGfx/PathSkia.h>
 #include <LibGfx/ScalingMode.h>
 #include <LibGfx/WindingRule.h>
@@ -20,7 +22,6 @@
 #include <core/SkImageFilter.h>
 #include <core/SkPaint.h>
 #include <core/SkPath.h>
-#include <core/SkPathEffect.h>
 #include <core/SkSamplingOptions.h>
 
 namespace Gfx {

Libraries/LibWeb/HTML/Canvas/CanvasDrawImage.cpp

@@ -1,102 +1,94 @@
 /*
  * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #include <LibWeb/HTML/Canvas/CanvasDrawImage.h>
 #include <LibWeb/HTML/ImageBitmap.h>
-#include <LibWeb/SVG/SVGImageElement.h>
 
 namespace Web::HTML {
 
-static void default_source_size(CanvasImageSource const& image, float& source_width, float& source_height)
+Gfx::IntSize canvas_image_source_dimensions(CanvasImageSource const& image)
 {
-    image.visit(
-        [&source_width, &source_height](GC::Root<HTMLImageElement> const& source) {
-            if (source->immutable_bitmap()) {
-                source_width = source->immutable_bitmap()->width();
-                source_height = source->immutable_bitmap()->height();
-            } else {
-                // FIXME: This is very janky and not correct.
-                source_width = source->width();
-                source_height = source->height();
-            }
-        },
-        [&source_width, &source_height](GC::Root<SVG::SVGImageElement> const& source) {
-            if (source->current_image_bitmap()) {
-                source_width = source->current_image_bitmap()->width();
-                source_height = source->current_image_bitmap()->height();
-            } else {
-                // FIXME: This is very janky and not correct.
-                source_width = source->width()->anim_val()->value();
-                source_height = source->height()->anim_val()->value();
-            }
-        },
-        [&source_width, &source_height](GC::Root<HTML::HTMLVideoElement> const& source) {
-            if (auto const bitmap = source->bitmap(); bitmap) {
-                source_width = bitmap->width();
-                source_height = bitmap->height();
-            } else {
-                source_width = source->video_width();
-                source_height = source->video_height();
-            }
-        },
-        [&source_width, &source_height](GC::Root<OffscreenCanvas> const& source) {
-            auto const bitmap = source->bitmap();
+    return image.visit(
+        [](GC::Root<HTMLImageElement> const& source) -> Gfx::IntSize {
+            if (auto immutable_bitmap = source->immutable_bitmap())
+                return immutable_bitmap->size();
 
-            if (!bitmap) {
-                source_width = 0;
-                source_height = 0;
-                return;
-            }
-            source_width = bitmap->width();
-            source_height = bitmap->height();
+            // FIXME: This is very janky and not correct.
+            return { source->width(), source->height() };
         },
-        [&source_width, &source_height](GC::Root<HTMLCanvasElement> const& source) {
-            if (source->surface()) {
-                source_width = source->surface()->size().width();
-                source_height = source->surface()->size().height();
-            } else {
-                source_width = source->width();
-                source_height = source->height();
-            }
+        [](GC::Root<SVG::SVGImageElement> const& source) -> Gfx::IntSize {
+            if (auto immutable_bitmap = source->current_image_bitmap())
+                return immutable_bitmap->size();
+
+            // FIXME: This is very janky and not correct.
+            return { source->width()->anim_val()->value(), source->height()->anim_val()->value() };
         },
-        [&source_width, &source_height](auto const& source) {
-            if (source->bitmap()) {
-                source_width = source->bitmap()->width();
-                source_height = source->bitmap()->height();
-            } else {
-                source_width = source->width();
-                source_height = source->height();
-            }
+        [](GC::Root<HTMLCanvasElement> const& source) -> Gfx::IntSize {
+            if (auto painting_surface = source->surface())
+                return painting_surface->size();
+            return { source->width(), source->height() };
+        },
+        [](GC::Root<ImageBitmap> const& source) -> Gfx::IntSize {
+            if (auto* bitmap = source->bitmap())
+                return bitmap->size();
+            return { source->width(), source->height() };
+        },
+        [](GC::Root<OffscreenCanvas> const& source) -> Gfx::IntSize {
+            if (auto bitmap = source->bitmap())
+                return bitmap->size();
+            return {};
+        },
+        [](GC::Root<HTMLVideoElement> const& source) -> Gfx::IntSize {
+            if (auto bitmap = source->bitmap())
+                return bitmap->size();
+            return { source->video_width(), source->video_height() };
         });
 }
 
-WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(Web::HTML::CanvasImageSource const& image, float destination_x, float destination_y)
+RefPtr<Gfx::ImmutableBitmap> canvas_image_source_bitmap(CanvasImageSource const& image)
+{
+    return image.visit(
+        [](OneOf<GC::Root<HTMLImageElement>, GC::Root<SVG::SVGImageElement>> auto const& element) {
+            return element->default_image_bitmap();
+        },
+        [](GC::Root<HTMLCanvasElement> const& canvas) -> RefPtr<Gfx::ImmutableBitmap> {
+            auto surface = canvas->surface();
+            if (!surface)
+                return Gfx::ImmutableBitmap::create(*canvas->get_bitmap_from_surface());
+            return Gfx::ImmutableBitmap::create_snapshot_from_painting_surface(*surface);
+        },
+        [](OneOf<GC::Root<ImageBitmap>, GC::Root<OffscreenCanvas>, GC::Root<HTMLVideoElement>> auto const& source) -> RefPtr<Gfx::ImmutableBitmap> {
+            auto bitmap = source->bitmap();
+            if (!bitmap)
+                return {};
+            return Gfx::ImmutableBitmap::create(*bitmap);
+        });
+}
+
+WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(CanvasImageSource const& image, float destination_x, float destination_y)
 {
     // If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that one CSS pixel in the image is treated as one unit in the output bitmap's coordinate space.
     // If the sx, sy, sw, and sh arguments are omitted, then they must default to 0, 0, the image's intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
     // If the image has no intrinsic dimensions, then the concrete object size must be used instead, as determined using the CSS "Concrete Object Size Resolution" algorithm, with the specified size having
     // neither a definite width nor height, nor any additional constraints, the object's intrinsic properties being those of the image argument, and the default object size being the size of the output bitmap.
-    float source_width;
-    float source_height;
-    default_source_size(image, source_width, source_height);
-    return draw_image_internal(image, 0, 0, source_width, source_height, destination_x, destination_y, source_width, source_height);
+    auto size = canvas_image_source_dimensions(image);
+    return draw_image_internal(image, 0, 0, size.width(), size.height(), destination_x, destination_y, size.width(), size.height());
 }
 
-WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(Web::HTML::CanvasImageSource const& image, float destination_x, float destination_y, float destination_width, float destination_height)
+WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(CanvasImageSource const& image, float destination_x, float destination_y, float destination_width, float destination_height)
 {
     // If the sx, sy, sw, and sh arguments are omitted, then they must default to 0, 0, the image's intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
     // If the image has no intrinsic dimensions, then the concrete object size must be used instead, as determined using the CSS "Concrete Object Size Resolution" algorithm, with the specified size having
     // neither a definite width nor height, nor any additional constraints, the object's intrinsic properties being those of the image argument, and the default object size being the size of the output bitmap.
-    float source_width;
-    float source_height;
-    default_source_size(image, source_width, source_height);
-    return draw_image_internal(image, 0, 0, source_width, source_height, destination_x, destination_y, destination_width, destination_height);
+    auto size = canvas_image_source_dimensions(image);
+    return draw_image_internal(image, 0, 0, size.width(), size.height(), destination_x, destination_y, destination_width, destination_height);
 }
 
-WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(Web::HTML::CanvasImageSource const& image, float source_x, float source_y, float source_width, float source_height, float destination_x, float destination_y, float destination_width, float destination_height)
+WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(CanvasImageSource const& image, float source_x, float source_y, float source_width, float source_height, float destination_x, float destination_y, float destination_width, float destination_height)
 {
     return draw_image_internal(image, source_x, source_y, source_width, source_height, destination_x, destination_y, destination_width, destination_height);
 }

Libraries/LibWeb/HTML/Canvas/CanvasDrawImage.h

@@ -1,16 +1,19 @@
 /*
  * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #pragma once
 
+#include <LibGfx/Size.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/HTML/HTMLCanvasElement.h>
 #include <LibWeb/HTML/HTMLImageElement.h>
 #include <LibWeb/HTML/HTMLVideoElement.h>
 #include <LibWeb/HTML/OffscreenCanvas.h>
+#include <LibWeb/SVG/SVGImageElement.h>
 #include <LibWeb/WebIDL/ExceptionOr.h>
 
 namespace Web::HTML {
@@ -19,6 +22,9 @@ namespace Web::HTML {
 // NOTE: This is the Variant created by the IDL wrapper generator, and needs to be updated accordingly.
 using CanvasImageSource = Variant<GC::Root<HTMLImageElement>, GC::Root<SVG::SVGImageElement>, GC::Root<HTMLCanvasElement>, GC::Root<ImageBitmap>, GC::Root<OffscreenCanvas>, GC::Root<HTMLVideoElement>>;
 
+Gfx::IntSize canvas_image_source_dimensions(CanvasImageSource const&);
+RefPtr<Gfx::ImmutableBitmap> canvas_image_source_bitmap(CanvasImageSource const&);
+
 // https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage
 class CanvasDrawImage {
 public:

Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h

@@ -15,6 +15,7 @@
 #include <LibWeb/HTML/Canvas/CanvasState.h>
 #include <LibWeb/HTML/CanvasGradient.h>
 #include <LibWeb/HTML/CanvasPattern.h>
+#include <LibWeb/HTML/HTMLCanvasElement.h>
 
 namespace Web::HTML {
 

Libraries/LibWeb/HTML/Canvas/CanvasState.h

@@ -16,9 +16,8 @@
 #include <LibGfx/Font/Font.h>
 #include <LibGfx/FontCascadeList.h>
 #include <LibGfx/PaintStyle.h>
-#include <LibGfx/Path.h>
-#include <LibGfx/WindingRule.h>
 #include <LibWeb/Bindings/CanvasRenderingContext2DPrototype.h>
+#include <LibWeb/CSS/StyleValues/StyleValue.h>
 #include <LibWeb/HTML/CanvasGradient.h>
 #include <LibWeb/HTML/CanvasPattern.h>
 

Libraries/LibWeb/HTML/CanvasPattern.cpp

@@ -1,22 +1,21 @@
 /*
  * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  * Copyright (c) 2024, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include <LibGfx/Bitmap.h>
 #include <LibWeb/Bindings/CanvasPatternPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/HTML/CanvasPattern.h>
 #include <LibWeb/HTML/CanvasRenderingContext2D.h>
-#include <LibWeb/SVG/SVGImageElement.h>
 
 namespace Web::HTML {
 
 GC_DEFINE_ALLOCATOR(CanvasPattern);
 
-CanvasPattern::CanvasPattern(JS::Realm& realm, CanvasPatternPaintStyle& pattern)
+CanvasPattern::CanvasPattern(JS::Realm& realm, Gfx::CanvasPatternPaintStyle& pattern)
     : PlatformObject(realm)
     , m_pattern(pattern)
 {
@@ -27,15 +26,15 @@ CanvasPattern::~CanvasPattern() = default;
 // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createpattern
 WebIDL::ExceptionOr<GC::Ptr<CanvasPattern>> CanvasPattern::create(JS::Realm& realm, CanvasImageSource const& image, StringView repetition)
 {
-    auto parse_repetition = [&](auto repetition) -> Optional<CanvasPatternPaintStyle::Repetition> {
-        if (repetition == "repeat"sv)
-            return CanvasPatternPaintStyle::Repetition::Repeat;
-        if (repetition == "repeat-x"sv)
-            return CanvasPatternPaintStyle::Repetition::RepeatX;
-        if (repetition == "repeat-y"sv)
-            return CanvasPatternPaintStyle::Repetition::RepeatY;
-        if (repetition == "no-repeat"sv)
-            return CanvasPatternPaintStyle::Repetition::NoRepeat;
+    auto parse_repetition = [&](auto value) -> Optional<Gfx::CanvasPatternPaintStyle::Repetition> {
+        if (value == "repeat"sv)
+            return Gfx::CanvasPatternPaintStyle::Repetition::Repeat;
+        if (value == "repeat-x"sv)
+            return Gfx::CanvasPatternPaintStyle::Repetition::RepeatX;
+        if (value == "repeat-y"sv)
+            return Gfx::CanvasPatternPaintStyle::Repetition::RepeatY;
+        if (value == "no-repeat"sv)
+            return Gfx::CanvasPatternPaintStyle::Repetition::NoRepeat;
         return {};
     };
 
@@ -60,12 +59,14 @@ WebIDL::ExceptionOr<GC::Ptr<CanvasPattern>> CanvasPattern::create(JS::Realm& rea
         return WebIDL::SyntaxError::create(realm, "Repetition value is not valid"_utf16);
 
     // 6. Let pattern be a new CanvasPattern object with the image image and the repetition behavior given by repetition.
-    auto pattern = TRY_OR_THROW_OOM(realm.vm(), CanvasPatternPaintStyle::create(image, *repetition_value));
+    auto immutable_bitmap = canvas_image_source_bitmap(image);
+    auto paint_style = TRY_OR_THROW_OOM(realm.vm(), Gfx::CanvasPatternPaintStyle::create(immutable_bitmap, *repetition_value));
+    auto pattern = realm.create<CanvasPattern>(realm, *paint_style);
 
     // FIXME: 7. If image is not origin-clean, then mark pattern as not origin-clean.
 
     // 8. Return pattern.
-    return realm.create<CanvasPattern>(realm, *pattern);
+    return pattern;
 }
 
 void CanvasPattern::initialize(JS::Realm& realm)

Libraries/LibWeb/HTML/CanvasPattern.h

@@ -1,6 +1,7 @@
 /*
  * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  * Copyright (c) 2025, Shannon Booth <shannon@serenityos.org>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,33 +14,6 @@
 
 namespace Web::HTML {
 
-class CanvasPatternPaintStyle final : public Gfx::PaintStyle {
-public:
-    enum class Repetition {
-        Repeat,
-        RepeatX,
-        RepeatY,
-        NoRepeat
-    };
-
-    static ErrorOr<NonnullRefPtr<CanvasPatternPaintStyle>> create(CanvasImageSource image, Repetition repetition)
-    {
-        return adopt_nonnull_ref_or_enomem(new (nothrow) CanvasPatternPaintStyle(move(image), repetition));
-    }
-
-    Repetition repetition() const { return m_repetition; }
-
-private:
-    CanvasPatternPaintStyle(CanvasImageSource image, Repetition repetition)
-        : m_image(move(image))
-        , m_repetition(repetition)
-    {
-    }
-
-    CanvasImageSource m_image;
-    Repetition m_repetition { Repetition::Repeat };
-};
-
 class CanvasPattern final : public Bindings::PlatformObject {
     WEB_PLATFORM_OBJECT(CanvasPattern, Bindings::PlatformObject);
     GC_DECLARE_ALLOCATOR(CanvasPattern);
@@ -52,11 +26,11 @@ public:
     NonnullRefPtr<Gfx::PaintStyle> to_gfx_paint_style() { return m_pattern; }
 
 private:
-    CanvasPattern(JS::Realm&, CanvasPatternPaintStyle&);
+    CanvasPattern(JS::Realm&, Gfx::CanvasPatternPaintStyle&);
 
     virtual void initialize(JS::Realm&) override;
 
-    NonnullRefPtr<CanvasPatternPaintStyle> m_pattern;
+    NonnullRefPtr<Gfx::CanvasPatternPaintStyle> m_pattern;
 };
 
 }

Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp

@@ -21,6 +21,8 @@
 #include <LibWeb/HTML/CanvasRenderingContext2D.h>
 #include <LibWeb/HTML/HTMLCanvasElement.h>
 #include <LibWeb/HTML/HTMLImageElement.h>
+#include <LibWeb/HTML/HTMLMediaElement.h>
+#include <LibWeb/HTML/HTMLVideoElement.h>
 #include <LibWeb/HTML/ImageBitmap.h>
 #include <LibWeb/HTML/ImageData.h>
 #include <LibWeb/HTML/ImageRequest.h>
@@ -135,31 +137,7 @@ WebIDL::ExceptionOr<void> CanvasRenderingContext2D::draw_image_internal(CanvasIm
     if (usability == CanvasImageSourceUsability::Bad)
         return {};
 
-    auto bitmap = image.visit(
-        [](GC::Root<HTMLImageElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
-            auto width = source->intrinsic_width().value_or({}).to_int();
-            auto height = source->intrinsic_height().value_or({}).to_int();
-            return source->default_image_bitmap_sized({ width, height });
-        },
-        [](GC::Root<SVG::SVGImageElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
-            auto width = source->intrinsic_width().value_or({}).to_int();
-            auto height = source->intrinsic_height().value_or({}).to_int();
-            return source->default_image_bitmap_sized({ width, height });
-        },
-        [](GC::Root<OffscreenCanvas> const& source) -> RefPtr<Gfx::ImmutableBitmap> { return Gfx::ImmutableBitmap::create(*source->bitmap()); },
-        [](GC::Root<HTMLCanvasElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
-            auto surface = source->surface();
-            if (!surface)
-                return {};
-            return Gfx::ImmutableBitmap::create_snapshot_from_painting_surface(*surface);
-        },
-        [](GC::Root<HTMLVideoElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> { return Gfx::ImmutableBitmap::create(*source->bitmap()); },
-        [](GC::Root<ImageBitmap> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
-            auto* bitmap = source->bitmap();
-            if (!bitmap)
-                return {};
-            return Gfx::ImmutableBitmap::create(*bitmap);
-        });
+    auto bitmap = canvas_image_source_bitmap(image);
     if (!bitmap)
         return {};
 

Libraries/LibWeb/HTML/HTMLImageElement.h

@@ -50,7 +50,7 @@ public:
     String alt() const { return get_attribute_value(HTML::AttributeNames::alt); }
 
     RefPtr<Gfx::ImmutableBitmap> immutable_bitmap() const;
-    RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const;
+    virtual RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const override;
 
     WebIDL::UnsignedLong width() const;
     WebIDL::ExceptionOr<void> set_width(WebIDL::UnsignedLong);

Libraries/LibWeb/Layout/ImageProvider.cpp

@@ -14,11 +14,30 @@ void ImageProvider::did_update_alt_text(ImageBox& layout_node)
     layout_node.dom_node_did_update_alt_text({});
 }
 
+Optional<CSSPixelSize> ImageProvider::intrinsic_size() const
+{
+    auto width = intrinsic_width();
+    auto height = intrinsic_height();
+    if (!width.has_value() || !height.has_value())
+        return {};
+
+    return CSSPixelSize { *width, *height };
+}
+
 RefPtr<Gfx::ImmutableBitmap> ImageProvider::current_image_bitmap() const
 {
-    int w = intrinsic_width().value_or({}).to_int();
-    int h = intrinsic_height().value_or({}).to_int();
-    return current_image_bitmap_sized({ w, h });
+    return current_image_bitmap_sized(intrinsic_size().value_or({}).to_type<int>());
+}
+
+RefPtr<Gfx::ImmutableBitmap> ImageProvider::default_image_bitmap() const
+{
+    return default_image_bitmap_sized(intrinsic_size().value_or({}).to_type<int>());
+}
+
+RefPtr<Gfx::ImmutableBitmap> ImageProvider::default_image_bitmap_sized(Gfx::IntSize size) const
+{
+    // Defer to the current image by default.
+    return current_image_bitmap_sized(size);
 }
 
 }

Libraries/LibWeb/Layout/ImageProvider.h

@@ -21,10 +21,15 @@ public:
 
     virtual Optional<CSSPixels> intrinsic_width() const = 0;
     virtual Optional<CSSPixels> intrinsic_height() const = 0;
+    Optional<CSSPixelSize> intrinsic_size() const;
     virtual Optional<CSSPixelFraction> intrinsic_aspect_ratio() const = 0;
 
     virtual RefPtr<Gfx::ImmutableBitmap> current_image_bitmap() const;
     virtual RefPtr<Gfx::ImmutableBitmap> current_image_bitmap_sized(Gfx::IntSize) const = 0;
+
+    virtual RefPtr<Gfx::ImmutableBitmap> default_image_bitmap() const;
+    virtual RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const;
+
     virtual void set_visible_in_viewport(bool) = 0;
 
     virtual void image_provider_visit_edges(GC::Cell::Visitor& visitor) const

Libraries/LibWeb/SVG/SVGImageElement.h

@@ -29,7 +29,7 @@ public:
 
     Gfx::FloatRect bounding_box() const;
 
-    RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const;
+    virtual RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const override;
 
     // ^Layout::ImageProvider
     virtual bool is_image_available() const override;

Tests/LibWeb/Screenshot/expected/canvas-pattern-ref.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+    * {
+        margin: 0;
+        overflow: hidden;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/canvas-pattern-ref.png">

Tests/LibWeb/Screenshot/input/canvas-pattern.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/canvas-pattern-ref.html" />
+<style>
+* {
+    margin: 0;
+}
+
+body {
+    background-color: white;
+}
+
+canvas {
+    border: 2px solid black;
+    margin: 5px;
+    padding: 5px;
+}
+</style>
+
+<canvas data-type="img" data-repeat="repeat" width="250" height="250"></canvas>
+<canvas data-type="img" data-repeat="repeat-x" width="250" height="250"></canvas>
+<canvas data-type="img" data-repeat="repeat-y" width="250" height="250"></canvas>
+<canvas data-type="img" data-repeat="no-repeat" width="250" height="250"></canvas>
+
+<script>
+const img = new Image();
+img.onload = () => {
+    for (const canvas of document.querySelectorAll('canvas[data-type=img]')) {
+        const ctx = canvas.getContext('2d');
+        const pattern = ctx.createPattern(img, canvas.getAttribute('data-repeat'));
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+};
+img.src = '../data/car.png';
+</script>

Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
-Fail	Canvas test: 2d.pattern.basic.nocontext
+1 Pass
+Pass	Canvas test: 2d.pattern.basic.nocontext

Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
-Fail	Canvas test: 2d.pattern.paint.repeat.basic
+1 Pass
+Pass	Canvas test: 2d.pattern.paint.repeat.basic