diff --git a/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp b/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
index e266e0b81a..1e50fb5727 100644
--- a/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
+++ b/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
@@ -311,11 +311,11 @@ Gfx::Path CanvasRenderingContext2D::text_path(Utf16String const& text, float x,
     auto glyph_runs = Gfx::shape_text({ x, y }, text.utf16_view(), *font_cascade_list,
         resolved_letter_spacing(drawing_state, canvas_element()));
     Gfx::Path path;
+    float text_width = 0;
     for (auto const& glyph_run : glyph_runs) {
         path.glyph_run(glyph_run);
+        text_width += glyph_run->width();
     }
-
-    auto text_width = path.bounding_box().width();
     Gfx::AffineTransform transform = {};
 
     // https://html.spec.whatwg.org/multipage/canvas.html#text-preparation-algorithm:
diff --git a/Tests/LibWeb/Screenshot/expected/canvas-text.png b/Tests/LibWeb/Screenshot/expected/canvas-text.png
index 8ecdfb383d..c9056042af 100644
Binary files a/Tests/LibWeb/Screenshot/expected/canvas-text.png and b/Tests/LibWeb/Screenshot/expected/canvas-text.png differ
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.center.txt b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.center.txt
new file mode 100644
index 0000000000..71a7f198fe
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.center.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	textAlign center is the center of the em squares (not the bounding box)
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.end.ltr.txt b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.end.ltr.txt
new file mode 100644
index 0000000000..f6a962bb6e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.end.ltr.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	textAlign end with ltr is the right edge
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.right.txt b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.right.txt
new file mode 100644
index 0000000000..da38024c62
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.align.right.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	textAlign right is the right of the last em square (not the bounding box)
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.txt b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.txt
new file mode 100644
index 0000000000..a97ed69a8c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	fillText handles maxWidth based on line size, not bounding box size
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.space.collapse.end.txt b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.space.collapse.end.txt
new file mode 100644
index 0000000000..e0d65f5391
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/text/2d.text.draw.space.collapse.end.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	Space characters at the end of a line are NOT collapsed
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.center.html b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.center.html
new file mode 100644
index 0000000000..20ab6b6d59
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.center.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.text.draw.align.center</title>
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("../../../../fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.center</h1>
+<p class="desc">textAlign center is the center of the em squares (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'center';
+  ctx.fillText('DD', 50, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign center is the center of the em squares (not the bounding box)");
+</script>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.end.ltr.html b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.end.ltr.html
new file mode 100644
index 0000000000..c0cf2acb8e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.end.ltr.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.text.draw.align.end.ltr</title>
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("../../../../fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.end.ltr</h1>
+<p class="desc">textAlign end with ltr is the right edge</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"dir="ltr"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'end';
+  ctx.fillText('DD', 100, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign end with ltr is the right edge");
+</script>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.right.html b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.right.html
new file mode 100644
index 0000000000..c9a1a46d89
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.align.right.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.text.draw.align.right</title>
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("../../../../fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.right</h1>
+<p class="desc">textAlign right is the right of the last em square (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'right';
+  ctx.fillText('DD', 100, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign right is the right of the last em square (not the bounding box)");
+</script>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html
new file mode 100644
index 0000000000..773ebc2d91
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.text.draw.fill.maxWidth.bound</title>
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("../../../../fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.fill.maxWidth.bound</h1>
+<p class="desc">fillText handles maxWidth based on line size, not bounding box size</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('DD', 0, 37.5, 100);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "fillText handles maxWidth based on line size, not bounding box size");
+</script>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.space.collapse.end.html b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.space.collapse.end.html
new file mode 100644
index 0000000000..99d1184b7f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/canvas/element/text/2d.text.draw.space.collapse.end.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.text.draw.space.collapse.end</title>
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("../../../../fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.collapse.end</h1>
+<p class="desc">Space characters at the end of a line are NOT collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'right';
+  ctx.fillText('EE ', 100, 37.5);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2);
+
+}, "Space characters at the end of a line are NOT collapsed");
+</script>
+