diff --git a/Base/res/html/misc/canvas-gradients.html b/Base/res/html/misc/canvas-gradients.html
index 1a71069acb..145467d76e 100644
--- a/Base/res/html/misc/canvas-gradients.html
+++ b/Base/res/html/misc/canvas-gradients.html
@@ -18,7 +18,7 @@
 <canvas id="conic" width="200" height="200"></canvas>
 <h2>Linear Gradients</h2>
 <em>This time in a path to spice things up!</em><br>
-<canvas id="linear" width="200" height="200"></canvas>
+<canvas id="linear" width="400" height="200"></canvas>
 
 <script>
 {
@@ -137,7 +137,6 @@ makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
   const ctx = canvas.getContext("2d");
 
   const gradient = ctx.createLinearGradient(20, 20, 220, 120);
-  ctx.createLinearGradient(0,0,200,50);
   gradient.addColorStop(0,"red");
   gradient.addColorStop(0.15,"yellow");
   gradient.addColorStop(0.3,"green");
@@ -148,6 +147,12 @@ makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
 
   ctx.fillStyle = gradient;
 
+  const gradient2 = ctx.createLinearGradient(200,0,400,50);
+  gradient2.addColorStop(0,"cyan");
+  gradient2.addColorStop(1,"fuchsia");
+
+  ctx.strokeStyle = gradient2;
+
   const starPath = (cx, cy, spikes, outerRadius, innerRadius) => {
     let x = cx;
     let y = cy;
@@ -171,7 +176,11 @@ makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
     ctx.closePath();
   }
 
-  starPath(canvas.width/2,canvas.height/2,5,100,60);
+  starPath(canvas.width/4,canvas.height/2,5,100,60);
   ctx.fill();
+
+  starPath(canvas.width/4 + 200 ,canvas.height/2,5,80,40);
+  ctx.lineWidth = 5;
+  ctx.stroke();
 }
 </script>
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
index 8e7ff2b9c0..11863844dd 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
@@ -95,26 +95,22 @@ void CanvasRenderingContext2D::clear_rect(float x, float y, float width, float h
 
 void CanvasRenderingContext2D::stroke_rect(float x, float y, float width, float height)
 {
-    draw_clipped([&](auto& painter) {
-        auto& drawing_state = this->drawing_state();
+    auto& drawing_state = this->drawing_state();
 
-        auto rect = drawing_state.transform.map(Gfx::FloatRect(x, y, width, height));
-        // We could remove the rounding here, but the lines look better when they have whole number pixel endpoints.
-        auto top_left = drawing_state.transform.map(Gfx::FloatPoint(x, y)).to_rounded<float>();
-        auto top_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y)).to_rounded<float>();
-        auto bottom_left = drawing_state.transform.map(Gfx::FloatPoint(x, y + height - 1)).to_rounded<float>();
-        auto bottom_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y + height - 1)).to_rounded<float>();
+    // We could remove the rounding here, but the lines look better when they have whole number pixel endpoints.
+    auto top_left = drawing_state.transform.map(Gfx::FloatPoint(x, y)).to_rounded<float>();
+    auto top_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y)).to_rounded<float>();
+    auto bottom_left = drawing_state.transform.map(Gfx::FloatPoint(x, y + height - 1)).to_rounded<float>();
+    auto bottom_right = drawing_state.transform.map(Gfx::FloatPoint(x + width - 1, y + height - 1)).to_rounded<float>();
 
-        Gfx::Path path;
-        path.move_to(top_left);
-        path.line_to(top_right);
-        path.line_to(bottom_right);
-        path.line_to(bottom_left);
-        path.line_to(top_left);
-        painter.stroke_path(path, drawing_state.stroke_style.to_color_but_fixme_should_accept_any_paint_style(), drawing_state.line_width);
+    Gfx::Path path;
+    path.move_to(top_left);
+    path.line_to(top_right);
+    path.line_to(bottom_right);
+    path.line_to(bottom_left);
+    path.line_to(top_left);
 
-        return rect;
-    });
+    stroke_internal(path);
 }
 
 // 4.12.5.1.14 Drawing images, https://html.spec.whatwg.org/multipage/canvas.html#drawing-images
@@ -237,8 +233,11 @@ void CanvasRenderingContext2D::stroke_internal(Gfx::Path const& path)
 {
     draw_clipped([&](auto& painter) {
         auto& drawing_state = this->drawing_state();
-
-        painter.stroke_path(path, drawing_state.stroke_style.to_color_but_fixme_should_accept_any_paint_style(), drawing_state.line_width);
+        if (auto color = drawing_state.stroke_style.as_color(); color.has_value()) {
+            painter.stroke_path(path, *color, drawing_state.line_width);
+        } else {
+            painter.stroke_path(path, drawing_state.stroke_style.to_gfx_paint_style(), drawing_state.line_width);
+        }
         return path.bounding_box();
     });
 }