diff --git a/Base/res/html/misc/canvas-path-rect.html b/Base/res/html/misc/canvas-path-rect.html
new file mode 100644
index 0000000000..a132e52c0c
--- /dev/null
+++ b/Base/res/html/misc/canvas-path-rect.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>canvas path - rect example</title>
+</head>
+<body>
+<canvas width=500 height=500></canvas>
+<script>
+
+    function drawRect() {
+        var canvas = document.querySelector("canvas");
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = 'black';
+        ctx.fillRect(0, 0, 500, 500);
+
+        ctx.fillStyle = 'red';
+        ctx.beginPath();
+        ctx.rect(10, 20, 150, 100);
+        ctx.fill();
+
+        ctx.fillStyle = 'green';
+        ctx.beginPath();
+        ctx.rect(200, 210, 100, 100);
+        ctx.fill('evenodd');
+    }
+
+    drawRect();
+
+</script>
+</body>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index e54552d00b..65b4dbfc08 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -70,6 +70,7 @@ span#loadtime {
         <li><a href="percent-css.html">CSS percentage values</a></li>
         <li><a href="inline-block.html">display: inline-block; test</a></li>
         <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
+        <li><a href="canvas-path-rect.html">canvas path rect test</a></li>
         <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li>
         <li><a href="pngsuite_bas_png.html">pngsuite basic formats test</a></li>
         <li><a href="pngsuite_int_png.html">pngsuite interlacing test</a></li>
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
index bb2fee79d9..4ef8f59063 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
@@ -188,6 +188,17 @@ void CanvasRenderingContext2D::quadratic_curve_to(float cx, float cy, float x, f
     m_path.quadratic_bezier_curve_to({ cx, cy }, { x, y });
 }
 
+void CanvasRenderingContext2D::rect(float x, float y, float width, float height)
+{
+    m_path.move_to({ x, y });
+    if (width == 0 || height == 0)
+        return;
+    m_path.line_to({ x + width, y });
+    m_path.line_to({ x + width, y + height });
+    m_path.line_to({ x, y + height });
+    m_path.close();
+}
+
 void CanvasRenderingContext2D::stroke()
 {
     auto painter = this->painter();
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
index 8a8a1f860f..352ffba31b 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.h
@@ -33,6 +33,7 @@
 #include <LibGfx/Painter.h>
 #include <LibGfx/Path.h>
 #include <LibWeb/Bindings/Wrappable.h>
+#include <LibWeb/DOM/ExceptionOr.h>
 
 namespace Web::HTML {
 
@@ -73,6 +74,7 @@ public:
     void move_to(float x, float y);
     void line_to(float x, float y);
     void quadratic_curve_to(float cx, float cy, float x, float y);
+    void rect(float x, float y, float width, float height);
     void stroke();
 
     // FIXME: We should only have one fill(), really. Fix the wrapper generator!
diff --git a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
index 4f0663b186..5109c016a9 100644
--- a/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
+++ b/Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.idl
@@ -15,6 +15,7 @@ interface CanvasRenderingContext2D {
     undefined moveTo(double x, double y);
     undefined lineTo(double x, double y);
     undefined quadraticCurveTo(double cpx, double cpy, double x, double y);
+    undefined rect(double x, double y, double width, double height);
 
     undefined drawImage(HTMLImageElement image, double dx, double dy);
 
