From ff7af9725f4c2120c555684d723068d0f96814cc Mon Sep 17 00:00:00 2001
From: Yi Xu <yiyix@google.com>
Date: Sun, 21 Jan 2024 10:08:58 +0000
Subject: [PATCH] Bug 1857402 [wpt PR 42385] - Remove empty closed paths,
 a=testonly

Automatic update from web-platform-tests
Remove empty closed paths

As discussed in the github issue,
https://github.com/whatwg/html/issues/1079, it's generally agreed to
skip drawing line caps for closed paths. This is a follow up cl of:
https://chromium-review.googlesource.com/c/chromium/src/+/4864061.

In this cl, it verifies if each closed path is empty, then it removes
the empty closed subpaths from path. As the subpaths are removed, the
corresponding line caps are skipped.

Bug: 644067

Change-Id: I14c5c4819a31eb9249d01574ff1b5c60826c3b9e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4916516
Commit-Queue: Yi Xu <yiyix@google.com>
Reviewed-by: Jean-Philippe Gravel <jpgravel@chromium.org>
Reviewed-by: Justin Novosad <junov@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1247735}

--
Fix the inconsistency between yaml and generated files

--

wpt-commits: 3b5bcfe6fae26f8de7e5086bf9d5794dbefd456d, 3aa1c64bf887fa1ffa2fe960f43e67a2cc65f0b0
wpt-pr: 42385
---
 ...h.stroke.prune.closePath.arc-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.arc.html   |  35 ++++
 ....prune.closePath.bezierCurve-expected.html |  25 +++
 ...th.stroke.prune.closePath.bezierCurve.html |  35 ++++
 ....stroke.prune.closePath.line-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.line.html  |  35 ++++
 ...une.closePath.quadraticCurve-expected.html |  25 +++
 ...stroke.prune.closePath.quadraticCurve.html |  35 ++++
 ...h.stroke.prune.closePath.arc-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.arc.html   |  38 +++++
 .../2d.path.stroke.prune.closePath.arc.w.html |  52 ++++++
 ....prune.closePath.bezierCurve-expected.html |  25 +++
 ...th.stroke.prune.closePath.bezierCurve.html |  38 +++++
 ....stroke.prune.closePath.bezierCurve.w.html |  52 ++++++
 ....stroke.prune.closePath.line-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.line.html  |  38 +++++
 ...2d.path.stroke.prune.closePath.line.w.html |  52 ++++++
 ...une.closePath.quadraticCurve-expected.html |  25 +++
 ...stroke.prune.closePath.quadraticCurve.html |  38 +++++
 ...roke.prune.closePath.quadraticCurve.w.html |  52 ++++++
 .../canvas/tools/yaml-new/path-objects.yaml   | 151 ++++++++++++++++++
 21 files changed, 851 insertions(+)
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html

diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
new file mode 100644
index 0000000000000..7c0faba585958
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.arc(20, 20, 15, 0, Math.PI);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html
new file mode 100644
index 0000000000000..4b1d069275881
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.arc-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.arc(20, 20, 15, 0, Math.PI);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
new file mode 100644
index 0000000000000..4b867f821fa70
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
new file mode 100644
index 0000000000000..2c974bd2740e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.bezierCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(5, 5);
+  ctx.lineTo(5, 5);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(20, 40);
+  ctx.lineTo(20, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html
new file mode 100644
index 0000000000000..87a99c7938003
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html
new file mode 100644
index 0000000000000..655b2e12fda4f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.line-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+
+  ctx.moveTo(45, 45);
+  ctx.lineTo(45, 45);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
new file mode 100644
index 0000000000000..03635b0148385
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
new file mode 100644
index 0000000000000..9066770e2213d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.quadraticCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(5, 5);
+  ctx.lineTo(5, 5);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
new file mode 100644
index 0000000000000..7c0faba585958
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.arc(20, 20, 15, 0, Math.PI);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html
new file mode 100644
index 0000000000000..aeff5bfd400aa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.arc-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.arc(20, 20, 15, 0, Math.PI);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html
new file mode 100644
index 0000000000000..f10836239f4c6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.arc-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.arc(20, 20, 15, 0, Math.PI);
+    ctx.closePath();
+
+    ctx.moveTo(40, 40);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
new file mode 100644
index 0000000000000..4b867f821fa70
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
new file mode 100644
index 0000000000000..09d3152a5e718
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.bezierCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(5, 5);
+  ctx.lineTo(5, 5);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(20, 40);
+  ctx.lineTo(20, 40);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html
new file mode 100644
index 0000000000000..66f15eb3f1652
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.bezierCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(5, 5);
+    ctx.lineTo(5, 5);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(20, 40);
+    ctx.lineTo(20, 40);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html
new file mode 100644
index 0000000000000..87a99c7938003
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html
new file mode 100644
index 0000000000000..5a020cce1718e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.line-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+
+  ctx.moveTo(45, 45);
+  ctx.lineTo(45, 45);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html
new file mode 100644
index 0000000000000..860ad7036c904
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.line-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+
+    ctx.moveTo(45, 45);
+    ctx.lineTo(45, 45);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
new file mode 100644
index 0000000000000..03635b0148385
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
new file mode 100644
index 0000000000000..1d516710f2018
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.quadraticCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(5, 5);
+  ctx.lineTo(5, 5);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html
new file mode 100644
index 0000000000000..5bbd27326374f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.quadraticCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(5, 5);
+    ctx.lineTo(5, 5);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(80, 10, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(40, 40);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/path-objects.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/path-objects.yaml
index 673c908574427..755d6fb8d54dc 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/path-objects.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/path-objects.yaml
@@ -2879,6 +2879,157 @@
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
+- name: 2d.path.stroke.prune.closePath.line
+  desc: Test if zero-lengthed closePath before and after line are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+
+    ctx.moveTo(45, 45);
+    ctx.lineTo(45, 45);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+    ctx.stroke();
+
+- name: 2d.path.stroke.prune.closePath.bezierCurve
+  desc: Test if zero-lengthed closePath before and after bezier curve are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(5, 5);
+    ctx.lineTo(5, 5);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(20, 40);
+    ctx.lineTo(20, 40);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+- name: 2d.path.stroke.prune.closePath.quadraticCurve
+  desc: Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(5, 5);
+    ctx.lineTo(5, 5);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(80, 10, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(40, 40);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(80, 10, 100, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+- name: 2d.path.stroke.prune.closePath.arc
+  desc: Test if zero-lengthed closePath before and after arc are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.arc(20, 20, 15, 0, Math.PI);
+    ctx.closePath();
+
+    ctx.moveTo(40, 40);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.arc(20, 20, 15, 0, Math.PI);
+    ctx.closePath();
+    ctx.stroke();
 
 - name: 2d.path.transformation.basic
   code: |