From b16bd734d9cbb8510dfbf8475095687ab26be4e2 Mon Sep 17 00:00:00 2001
From: satyam22i <skillss771@gmail.com>
Date: Fri, 28 Nov 2025 21:09:58 +0530
Subject: [PATCH 1/2] Change canvas id to myCanvas in Path2D examples (Fixes
 #42155)

---
 files/en-us/web/api/path2d/path2d/index.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/en-us/web/api/path2d/path2d/index.md b/files/en-us/web/api/path2d/path2d/index.md
index b6174a03ab0e319..ee86722f113e32c 100644
--- a/files/en-us/web/api/path2d/path2d/index.md
+++ b/files/en-us/web/api/path2d/path2d/index.md
@@ -36,11 +36,11 @@ new Path2D(d)
 This example creates and copies a `Path2D` path.
 
 ```html hidden
-<canvas id="canvas"></canvas>
+<canvas id="myCanvas"></canvas>
 ```
 
 ```js
-const canvas = document.getElementById("canvas");
+const canvas = document.getElementById("myCanvas");
 const ctx = canvas.getContext("2d");
 
 let path1 = new Path2D();
@@ -63,11 +63,11 @@ point (`M10 10`) and then move horizontally 80 points to the right
 (`h -80`), and then back to the start (`Z`).
 
 ```html hidden
-<canvas id="canvas"></canvas>
+<canvas id="myCanvas"></canvas>
 ```
 
 ```js
-const canvas = document.getElementById("canvas");
+const canvas = document.getElementById("myCanvas");
 const ctx = canvas.getContext("2d");
 
 let p = new Path2D("M10 10 h 80 v 80 h -80 Z");

From d6f421bf008dc77d24e060dd7b98f5219663076f Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Fri, 28 Nov 2025 12:53:34 -0500
Subject: [PATCH 2/2] Unhide HTML

---
 files/en-us/web/api/path2d/path2d/index.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/files/en-us/web/api/path2d/path2d/index.md b/files/en-us/web/api/path2d/path2d/index.md
index ee86722f113e32c..feffe8b51f54de5 100644
--- a/files/en-us/web/api/path2d/path2d/index.md
+++ b/files/en-us/web/api/path2d/path2d/index.md
@@ -35,18 +35,18 @@ new Path2D(d)
 
 This example creates and copies a `Path2D` path.
 
-```html hidden
-<canvas id="myCanvas"></canvas>
+```html
+<canvas id="my-canvas"></canvas>
 ```
 
 ```js
-const canvas = document.getElementById("myCanvas");
+const canvas = document.getElementById("my-canvas");
 const ctx = canvas.getContext("2d");
 
-let path1 = new Path2D();
+const path1 = new Path2D();
 path1.rect(10, 10, 100, 100);
 
-let path2 = new Path2D(path1);
+const path2 = new Path2D(path1);
 path2.moveTo(220, 60);
 path2.arc(170, 60, 50, 0, 2 * Math.PI);
 
@@ -62,15 +62,15 @@ point (`M10 10`) and then move horizontally 80 points to the right
 (`h 80`), then 80 points down (`v 80`), then 80 points to the left
 (`h -80`), and then back to the start (`Z`).
 
-```html hidden
-<canvas id="myCanvas"></canvas>
+```html
+<canvas id="my-canvas"></canvas>
 ```
 
 ```js
-const canvas = document.getElementById("myCanvas");
+const canvas = document.getElementById("my-canvas");
 const ctx = canvas.getContext("2d");
 
-let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
+const p = new Path2D("M10 10 h 80 v 80 h -80 Z");
 ctx.fill(p);
 ```