Add example demonstrating creating and copying Path2D paths (#42532)

* Add Path2D example for creating and copying paths

* Update files/en-us/web/api/path2d/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update files/en-us/web/api/path2d/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update files/en-us/web/api/path2d/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Redo

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Joshua Chen <[email protected]>

Author: 3 people

files/en-us/web/api/path2d/path2d/index.md

@@ -8,9 +8,7 @@ browser-compat: api.Path2D.Path2D
 
 {{APIRef("Canvas API")}}{{AvailableInWorkers}}
 
-The **`Path2D()`** constructor returns a newly instantiated
-`Path2D` object, optionally with another path as an argument (creates a
-copy), or optionally with a string consisting of [SVG path](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths) data.
+The **`Path2D()`** constructor returns a newly instantiated `Path2D` object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of [SVG path](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths) data.
 
 ## Syntax
 
@@ -23,17 +21,15 @@ new Path2D(d)
 ### Parameters
 
 - `path` {{optional_inline}}
-  - : When invoked with another `Path2D` object, a copy of the
-    `path` argument is created.
+  - : When invoked with another `Path2D` object, a copy of the `path` argument is created.
 - `d` {{optional_inline}}
-  - : When invoked with a string consisting of [SVG path](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths) data, a new path is created
-    from that description.
+  - : When invoked with a string consisting of [SVG path](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths) data, a new path is created from that description.
 
 ## Examples
 
 ### Creating and copying paths
 
-This example creates and copies a `Path2D` path.
+This example creates and copies a `Path2D` path. First, `path1` is a rectangular path. Then, we copy `path1` into `path2` and add a circle to it. Finally, we stroke `path2`, which contains both the rectangle and the circle. Note that `path1` remains unchanged, although we never draw it to the canvas. Its only purpose is to show how you can build up a complex path by building on existing paths.
 
 ```html hidden
 <canvas id="canvas"></canvas>
@@ -43,10 +39,10 @@ This example creates and copies a `Path2D` path.
 const canvas = document.getElementById("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);
 
@@ -57,10 +53,7 @@ ctx.stroke(path2);
 
 ### Using SVG paths
 
-This example creates a `Path2D` path using [SVG path data](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths). The path will move to
-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`).
+This example creates a `Path2D` path using [SVG path data](/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths). The path will move to 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="canvas"></canvas>
@@ -70,7 +63,7 @@ point (`M10 10`) and then move horizontally 80 points to the right
 const canvas = document.getElementById("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);
 ```