diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h
index 5ff5703610b..25c3cec2617 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.h
@@ -22,37 +22,37 @@ public:
     ~CanvasFillStrokeStyles() = default;
     using FillOrStrokeStyleVariant = Variant<DeprecatedString, JS::Handle<CanvasGradient>>;
 
-    static CanvasState::FillOrStrokeStyle to_canvas_state_fill_or_stoke_style(auto const& style)
+    static CanvasState::FillOrStrokeStyle to_canvas_state_fill_or_stroke_style(auto const& style)
     {
         return style.visit(
             [&](DeprecatedString const& string) -> CanvasState::FillOrStrokeStyle {
                 return Gfx::Color::from_string(string).value_or(Color::Black);
             },
-            [&](JS::Handle<CanvasGradient> gradient) -> CanvasState::FillOrStrokeStyle {
-                return gradient;
+            [&](auto fill_or_stroke_style) -> CanvasState::FillOrStrokeStyle {
+                return fill_or_stroke_style;
             });
     }
 
     void set_fill_style(FillOrStrokeStyleVariant style)
     {
         // FIXME: 2. If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
-        my_drawing_state().fill_style = to_canvas_state_fill_or_stoke_style(style);
+        my_drawing_state().fill_style = to_canvas_state_fill_or_stroke_style(style);
     }
 
     FillOrStrokeStyleVariant fill_style() const
     {
-        return my_drawing_state().fill_style.to_js_fill_or_stoke_style();
+        return my_drawing_state().fill_style.to_js_fill_or_stroke_style();
     }
 
     void set_stroke_style(FillOrStrokeStyleVariant style)
     {
         // FIXME: 2. If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
-        my_drawing_state().stroke_style = to_canvas_state_fill_or_stoke_style(style);
+        my_drawing_state().stroke_style = to_canvas_state_fill_or_stroke_style(style);
     }
 
     FillOrStrokeStyleVariant stroke_style() const
     {
-        return my_drawing_state().stroke_style.to_js_fill_or_stoke_style();
+        return my_drawing_state().stroke_style.to_js_fill_or_stroke_style();
     }
 
     WebIDL::ExceptionOr<JS::NonnullGCPtr<CanvasGradient>> create_radial_gradient(double x0, double y0, double r0, double x1, double y1, double r1)
diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp
index 876cc17d600..d20f69542b6 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp
@@ -42,14 +42,14 @@ bool CanvasState::is_context_lost()
 
 NonnullRefPtr<Gfx::PaintStyle> CanvasState::FillOrStrokeStyle::to_gfx_paint_style()
 {
-    return m_fill_or_stoke_style.visit(
+    return m_fill_or_stroke_style.visit(
         [&](Gfx::Color color) -> NonnullRefPtr<Gfx::PaintStyle> {
             if (!m_color_paint_style)
                 m_color_paint_style = Gfx::SolidColorPaintStyle::create(color);
             return m_color_paint_style.release_nonnull();
         },
-        [&](JS::Handle<CanvasGradient> gradient) {
-            return gradient->to_gfx_paint_style();
+        [&](auto handle) {
+            return handle->to_gfx_paint_style();
         });
 }
 
@@ -60,7 +60,7 @@ Gfx::Color CanvasState::FillOrStrokeStyle::to_color_but_fixme_should_accept_any_
 
 Optional<Gfx::Color> CanvasState::FillOrStrokeStyle::as_color() const
 {
-    if (auto* color = m_fill_or_stoke_style.get_pointer<Gfx::Color>())
+    if (auto* color = m_fill_or_stroke_style.get_pointer<Gfx::Color>())
         return *color;
     return {};
 }
diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
index 3532d1bca47..d125b45b21c 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
@@ -30,12 +30,17 @@ public:
 
     struct FillOrStrokeStyle {
         FillOrStrokeStyle(Gfx::Color color)
-            : m_fill_or_stoke_style(color)
+            : m_fill_or_stroke_style(color)
         {
         }
 
         FillOrStrokeStyle(JS::Handle<CanvasGradient> gradient)
-            : m_fill_or_stoke_style(gradient)
+            : m_fill_or_stroke_style(gradient)
+        {
+        }
+
+        FillOrStrokeStyle(JS::Handle<CanvasPattern> pattern)
+            : m_fill_or_stroke_style(pattern)
         {
         }
 
@@ -44,15 +49,21 @@ public:
         Optional<Gfx::Color> as_color() const;
         Gfx::Color to_color_but_fixme_should_accept_any_paint_style() const;
 
-        Variant<DeprecatedString, JS::Handle<CanvasGradient>> to_js_fill_or_stoke_style() const
+        using JsFillOrStrokeStyle = Variant<DeprecatedString, JS::Handle<CanvasGradient>>;
+
+        JsFillOrStrokeStyle to_js_fill_or_stroke_style() const
         {
-            if (auto* handle = m_fill_or_stoke_style.get_pointer<JS::Handle<CanvasGradient>>())
-                return *handle;
-            return m_fill_or_stoke_style.get<Gfx::Color>().to_deprecated_string();
+            return m_fill_or_stroke_style.visit(
+                [&](Gfx::Color color) -> JsFillOrStrokeStyle {
+                    return color.to_deprecated_string();
+                },
+                [&](auto handle) -> JsFillOrStrokeStyle {
+                    return handle;
+                });
         }
 
     private:
-        FillOrStrokeVariant m_fill_or_stoke_style;
+        FillOrStrokeVariant m_fill_or_stroke_style;
         RefPtr<Gfx::PaintStyle> m_color_paint_style { nullptr };
     };