diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp
index 880a28b31e..876cc17d60 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.cpp
@@ -42,7 +42,15 @@ bool CanvasState::is_context_lost()
 
 NonnullRefPtr<Gfx::PaintStyle> CanvasState::FillOrStrokeStyle::to_gfx_paint_style()
 {
-    VERIFY_NOT_REACHED();
+    return m_fill_or_stoke_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();
+        });
 }
 
 Gfx::Color CanvasState::FillOrStrokeStyle::to_color_but_fixme_should_accept_any_paint_style() const
diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
index eef073bf77..3532d1bca4 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasState.h
@@ -53,7 +53,7 @@ public:
 
     private:
         FillOrStrokeVariant m_fill_or_stoke_style;
-        RefPtr<Gfx::PaintStyle> m_color_fill_style { nullptr };
+        RefPtr<Gfx::PaintStyle> m_color_paint_style { nullptr };
     };
 
     // https://html.spec.whatwg.org/multipage/canvas.html#drawing-state
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp b/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp
index e704ceebf2..b53ef96a12 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp
+++ b/Userland/Libraries/LibWeb/HTML/CanvasGradient.cpp
@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -13,35 +14,25 @@ namespace Web::HTML {
 
 JS::NonnullGCPtr<CanvasGradient> CanvasGradient::create_radial(JS::Realm& realm, double x0, double y0, double r0, double x1, double y1, double r1)
 {
-    (void)x0;
-    (void)y0;
-    (void)r0;
-    (void)x1;
-    (void)y1;
-    (void)r1;
-    return realm.heap().allocate<CanvasGradient>(realm, realm, Type::Radial);
+    auto radial_gradient = Gfx::CanvasRadialGradientPaintStyle::create(Gfx::FloatPoint { x0, y0 }, r0, Gfx::FloatPoint { x1, y1 }, r1);
+    return realm.heap().allocate<CanvasGradient>(realm, realm, *radial_gradient);
 }
 
 JS::NonnullGCPtr<CanvasGradient> CanvasGradient::create_linear(JS::Realm& realm, double x0, double y0, double x1, double y1)
 {
-    (void)x0;
-    (void)y0;
-    (void)x1;
-    (void)y1;
-    return realm.heap().allocate<CanvasGradient>(realm, realm, Type::Linear);
+    auto linear_gradient = Gfx::CanvasLinearGradientPaintStyle::create(Gfx::FloatPoint { x0, y0 }, Gfx::FloatPoint { x1, y1 });
+    return realm.heap().allocate<CanvasGradient>(realm, realm, *linear_gradient);
 }
 
 JS::NonnullGCPtr<CanvasGradient> CanvasGradient::create_conic(JS::Realm& realm, double start_angle, double x, double y)
 {
-    (void)start_angle;
-    (void)x;
-    (void)y;
-    return realm.heap().allocate<CanvasGradient>(realm, realm, Type::Conic);
+    auto conic_gradient = Gfx::CanvasConicGradientPaintStyle::create(Gfx::FloatPoint { x, y }, start_angle);
+    return realm.heap().allocate<CanvasGradient>(realm, realm, *conic_gradient);
 }
 
-CanvasGradient::CanvasGradient(JS::Realm& realm, Type type)
+CanvasGradient::CanvasGradient(JS::Realm& realm, Gfx::GradientPaintStyle& gradient)
     : PlatformObject(realm)
-    , m_type(type)
+    , m_gradient(gradient)
 {
 }
 
@@ -68,12 +59,11 @@ WebIDL::ExceptionOr<void> CanvasGradient::add_color_stop(double offset, Deprecat
         return WebIDL::SyntaxError::create(realm(), "Could not parse color for CanvasGradient");
 
     // 4. Place a new stop on the gradient, at offset offset relative to the whole gradient, and with the color parsed color.
-    m_color_stops.append(ColorStop { offset, parsed_color.value() });
+    m_gradient->add_color_stop(offset, parsed_color.value());
 
     // FIXME: If multiple stops are added at the same offset on a gradient, then they must be placed in the order added,
     //        with the first one closest to the start of the gradient, and each subsequent one infinitesimally further along
     //        towards the end point (in effect causing all but the first and last stop added at each point to be ignored).
-    quick_sort(m_color_stops, [](auto& a, auto& b) { return a.offset < b.offset; });
 
     return {};
 }
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasGradient.h b/Userland/Libraries/LibWeb/HTML/CanvasGradient.h
index 92f2c1f551..583ae088ef 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasGradient.h
+++ b/Userland/Libraries/LibWeb/HTML/CanvasGradient.h
@@ -1,12 +1,13 @@
 /*
  * Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #pragma once
 
-#include <LibGfx/Color.h>
+#include <LibGfx/PaintStyle.h>
 #include <LibWeb/Bindings/PlatformObject.h>
 
 namespace Web::HTML {
@@ -15,12 +16,6 @@ class CanvasGradient final : public Bindings::PlatformObject {
     WEB_PLATFORM_OBJECT(CanvasGradient, Bindings::PlatformObject);
 
 public:
-    enum class Type {
-        Linear,
-        Radial,
-        Conic,
-    };
-
     static JS::NonnullGCPtr<CanvasGradient> create_radial(JS::Realm&, double x0, double y0, double r0, double x1, double y1, double r1);
     static JS::NonnullGCPtr<CanvasGradient> create_linear(JS::Realm&, double x0, double y0, double x1, double y1);
     static JS::NonnullGCPtr<CanvasGradient> create_conic(JS::Realm&, double start_angle, double x, double y);
@@ -29,19 +24,14 @@ public:
 
     ~CanvasGradient();
 
+    NonnullRefPtr<Gfx::PaintStyle> to_gfx_paint_style() { return m_gradient; }
+
 private:
-    CanvasGradient(JS::Realm&, Type);
+    CanvasGradient(JS::Realm&, Gfx::GradientPaintStyle& gradient);
 
     virtual void initialize(JS::Realm&) override;
 
-    Type m_type {};
-
-    struct ColorStop {
-        double offset { 0 };
-        Gfx::Color color;
-    };
-
-    Vector<ColorStop> m_color_stops;
+    NonnullRefPtr<Gfx::GradientPaintStyle> m_gradient;
 };
 
 }