[pull] main from mdn:main

files/en-us/_redirects.txt

@@ -455,7 +455,7 @@
 /en-US/docs/CSS/Alternative_style_sheets	/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet
 /en-US/docs/CSS/At-rule	/en-US/docs/Web/CSS/CSS_syntax/At-rule
 /en-US/docs/CSS/Attribute_selectors	/en-US/docs/Web/CSS/Attribute_selectors
-/en-US/docs/CSS/Aural	/en-US/docs/Web/CSS/@media/aural
+/en-US/docs/CSS/Aural	/en-US/docs/Web/CSS/@media
 /en-US/docs/CSS/CSS3_Columns	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 /en-US/docs/CSS/CSS_Properties_Reference	/en-US/docs/Web/CSS/Reference#index
 /en-US/docs/CSS/CSS_Reference	/en-US/docs/Web/CSS/Reference
@@ -935,7 +935,7 @@
 /en-US/docs/CSS:@media	/en-US/docs/Web/CSS/@media
 /en-US/docs/CSS:Adjacent_sibling_selectors	/en-US/docs/Web/CSS/Next-sibling_combinator
 /en-US/docs/CSS:Attribute_selectors	/en-US/docs/Web/CSS/Attribute_selectors
-/en-US/docs/CSS:Aural	/en-US/docs/Web/CSS/@media/aural
+/en-US/docs/CSS:Aural	/en-US/docs/Web/CSS/@media
 /en-US/docs/CSS:Child_selectors	/en-US/docs/Web/CSS/Child_combinator
 /en-US/docs/CSS:Descendant_selectors	/en-US/docs/Web/CSS/Descendant_combinator
 /en-US/docs/CSS:FAQ	/en-US/docs/Web/CSS
@@ -9796,6 +9796,7 @@
 /en-US/docs/Web/API/PaymentRequest/onshippingaddresschange	/en-US/docs/Web/API/PaymentRequest/shippingaddresschange_event
 /en-US/docs/Web/API/PaymentRequest/onshippingoptionchange	/en-US/docs/Web/API/PaymentRequest/shippingoptionchange_event
 /en-US/docs/Web/API/PaymentRequest/shippingaddresschange	/en-US/docs/Web/API/PaymentRequest/shippingaddresschange_event
+/en-US/docs/Web/API/PaymentRequestEvent/instrumentKey	/en-US/docs/Web/API/PaymentRequestEvent
 /en-US/docs/Web/API/PaymentRequestEvent/topLevelOrigin	/en-US/docs/Web/API/PaymentRequestEvent/topOrigin
 /en-US/docs/Web/API/PaymentResponse/onpayerdetailchange	/en-US/docs/Web/API/PaymentResponse/payerdetailchange_event
 /en-US/docs/Web/API/PaymentResponse/payerdetail_event	/en-US/docs/Web/API/PaymentResponse/payerdetailchange_event
@@ -12086,6 +12087,7 @@
 /en-US/docs/Web/CSS/:nth-of-type()	/en-US/docs/Web/CSS/:nth-of-type
 /en-US/docs/Web/CSS/@-moz-document	/en-US/docs/Web/CSS/@document
 /en-US/docs/Web/CSS/@font-face/font-variant	/en-US/docs/Web/CSS/@font-face
+/en-US/docs/Web/CSS/@media/aural	/en-US/docs/Web/CSS/@media
 /en-US/docs/Web/CSS/@media/update-frequency	/en-US/docs/Web/CSS/@media/update
 /en-US/docs/Web/CSS/@page_rule	/en-US/docs/Web/CSS/@page
 /en-US/docs/Web/CSS/@scroll-timeline	/en-US/docs/Web/CSS/scroll-timeline
@@ -12110,7 +12112,7 @@
 /en-US/docs/Web/CSS/Alternative_style_sheets	/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet
 /en-US/docs/Web/CSS/At-rule	/en-US/docs/Web/CSS/CSS_syntax/At-rule
 /en-US/docs/Web/CSS/At-rule-functions	/en-US/docs/Web/CSS/CSS_syntax/At-rule_functions
-/en-US/docs/Web/CSS/Aural	/en-US/docs/Web/CSS/@media/aural
+/en-US/docs/Web/CSS/Aural	/en-US/docs/Web/CSS/@media
 /en-US/docs/Web/CSS/Block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/Web/CSS/CSS3_Columns	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 /en-US/docs/Web/CSS/CSS_Background_and_Borders	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders

files/en-us/_wikihistory.json

@@ -50561,10 +50561,6 @@
     "modified": "2020-10-15T22:04:40.998Z",
     "contributors": ["SterileSummer", "sideshowbarker", "jpmedley"]
   },
-  "Web/API/PaymentRequestEvent/instrumentKey": {
-    "modified": "2020-10-15T22:04:43.225Z",
-    "contributors": ["jpmedley"]
-  },
   "Web/API/PaymentRequestEvent/methodData": {
     "modified": "2020-10-15T22:04:44.132Z",
     "contributors": ["jpmedley"]
@@ -74810,19 +74806,6 @@
       "cvrebert"
     ]
   },
-  "Web/CSS/@media/aural": {
-    "modified": "2020-08-05T13:50:38.977Z",
-    "contributors": [
-      "Sheppy",
-      "chrisdavidmills",
-      "wbamberg",
-      "ExE-Boss",
-      "mfluehr",
-      "kscarfone",
-      "ethertank",
-      "BijuGC"
-    ]
-  },
   "Web/CSS/@media/color": {
     "modified": "2020-10-15T21:30:16.164Z",
     "contributors": [

files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md

@@ -83,14 +83,38 @@ This method returns an `ImageData` object representing the pixel data for the ar
 
 This method is also demonstrated in the article [Manipulating video using canvas](/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas).
 
-### A color picker
-
-In this example we are using the [`getImageData()`](/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) method to display the color under the mouse cursor. For this, we need the current position of the mouse, then we look up the pixel data on that position in the pixel array that [`getImageData()`](/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) provides us. Finally, we use the array data to set a background color and a text in the `<div>` to display the color. Clicking on the image will do the same operation but remember what the selected color was.
+## Creating a color picker
+
+In this example, we are using the [`getImageData()`](/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) method to display the color under the mouse cursor.
+For this, we need the current position of the mouse, then we look up the pixel data at that position in the pixel array that [`getImageData()`](/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) provides.
+Finally, we use the array data to set a background color and a text in the `<div>` to display the color.
+Clicking on the image will do the same operation but uses the selected color.
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Source</th>
+      <th>Hovered color</th>
+      <th>Selected color</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <canvas id="canvas" width="300" height="227"></canvas>
+      </td>
+      <td class="color-cell" id="hovered-color"></td>
+      <td class="color-cell" id="selected-color"></td>
+    </tr>
+  </tbody>
+</table>
+```
 
 ```js
 const img = new Image();
 img.crossOrigin = "anonymous";
-img.src = "./assets/rhino.jpg";
+img.src = "/shared-assets/images/examples/rhino.jpg";
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 img.addEventListener("load", () => {
@@ -100,7 +124,7 @@ img.addEventListener("load", () => {
 const hoveredColor = document.getElementById("hovered-color");
 const selectedColor = document.getElementById("selected-color");
 
-function pick(event, destination) {
+const pick = (event, destination) => {
   const bounding = canvas.getBoundingClientRect();
   const x = event.clientX - bounding.left;
   const y = event.clientY - bounding.top;
@@ -112,17 +136,33 @@ function pick(event, destination) {
   destination.textContent = rgbColor;
 
   return rgbColor;
-}
+};
 
 canvas.addEventListener("mousemove", (event) => pick(event, hoveredColor));
 canvas.addEventListener("click", (event) => pick(event, selectedColor));
 ```
 
-The code's usage is demonstrated in the following live example:
+```css hidden
+body {
+  font-family: sans-serif;
+}
+.color-cell {
+  color: white;
+}
+th {
+  width: 30%;
+}
+td {
+  font-family: monospace;
+  font-weight: bold;
+  padding-left: 1rem;
+}
+```
 
-{{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/color-picker.html", '100%', 300)}}
+Hover your cursor anywhere over the image to see the result in the "Hovered color" column.
+Click anywhere in the image to see the result in the "Selected color" column.
 
-Also see the source code — [HTML](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-picker.html), [JavaScript](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-picker.js).
+{{embedlivesample("creating_a_color_picker", , 300)}}
 
 ## Painting pixel data into a context
 
@@ -140,18 +180,37 @@ For example, to paint the entire image represented by `myImageData` to the top l
 ctx.putImageData(myImageData, 0, 0);
 ```
 
-### Grayscaling and inverting colors
+## Grayscaling and inverting colors
 
-In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using [putImageData()](/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData). The invert function subtracts each color from the max value 255. The grayscale function uses the average of red, green and blue. You can also use a weighted average, given by the formula `x = 0.299r + 0.587g + 0.114b`, for example. See [Grayscale](https://en.wikipedia.org/wiki/Grayscale) on Wikipedia for more information.
+In this example, we iterate over all pixels to change their values, then we put the modified pixel array back onto the canvas using [putImageData()](/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData).
+The `invert` function subtracts each color from the max value, `255`.
+The `grayscale` function uses the average of red, green and blue. You can also use a weighted average, given by the formula `x = 0.299r + 0.587g + 0.114b`, for example.
+See [Grayscale](https://en.wikipedia.org/wiki/Grayscale) on Wikipedia for more information.
 
-```js
-const img = new Image();
-img.crossOrigin = "anonymous";
-img.src = "./assets/rhino.jpg";
+```html
+<canvas id="canvas" width="300" height="227"></canvas>
+<form>
+  <input type="radio" id="original" name="color" value="original" checked />
+  <label for="original">Original</label>
+
+  <input type="radio" id="grayscale" name="color" value="grayscale" />
+  <label for="grayscale">Grayscale</label>
 
+  <input type="radio" id="inverted" name="color" value="inverted" />
+  <label for="inverted">Inverted</label>
+
+  <input type="radio" id="sepia" name="color" value="sepia" />
+  <label for="sepia">Sepia</label>
+</form>
+```
+
+```js
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
+const img = new Image();
+img.crossOrigin = "anonymous";
+img.src = "/shared-assets/images/examples/rhino.jpg";
 img.onload = () => {
   ctx.drawImage(img, 0, 0);
 };
@@ -185,6 +244,22 @@ const grayscale = () => {
   ctx.putImageData(imageData, 0, 0);
 };
 
+const sepia = () => {
+  ctx.drawImage(img, 0, 0);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i], // red
+      g = data[i + 1], // green
+      b = data[i + 2]; // blue
+
+    data[i] = Math.min(Math.round(0.393 * r + 0.769 * g + 0.189 * b), 255);
+    data[i + 1] = Math.min(Math.round(0.349 * r + 0.686 * g + 0.168 * b), 255);
+    data[i + 2] = Math.min(Math.round(0.272 * r + 0.534 * g + 0.131 * b), 255);
+  }
+  ctx.putImageData(imageData, 0, 0);
+};
+
 const inputs = document.querySelectorAll("[name=color]");
 for (const input of inputs) {
   input.addEventListener("change", (evt) => {
@@ -193,69 +268,81 @@ for (const input of inputs) {
         return invert();
       case "grayscale":
         return grayscale();
+      case "sepia":
+        return sepia();
       default:
         return original();
     }
   });
 }
 ```
 
-The code's usage is demonstrated in the following live example:
-
-{{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/color-manipulation.html", '100%', 300)}}
+Click different options to view the result in action.
 
-Also see the source code — [HTML](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-manipulation.html), [JavaScript](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/color-manipulation.js).
+{{embedlivesample("grayscaling_and_inverting_colors", , 300)}}
 
 ## Zooming and anti-aliasing
 
-With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details. A third canvas without {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} is also drawn onto to be able to have a side by side comparison
-
-We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.
+With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas, and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom in on our picture and see the details. A third canvas without {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} is also drawn to allow a side by side comparison.
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Source</th>
+      <th>Smoothing enabled = true</th>
+      <th>Smoothing enabled = false</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <canvas id="canvas" width="300" height="227"></canvas>
+      </td>
+      <td>
+        <canvas id="smoothed" width="200" height="200"></canvas>
+      </td>
+      <td>
+        <canvas id="pixelated" width="200" height="200"></canvas>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
 
-```js
-zoomCtx.drawImage(
-  canvas,
-  Math.min(Math.max(0, x - 5), img.width - 10),
-  Math.min(Math.max(0, y - 5), img.height - 10),
-  10,
-  10,
-  0,
-  0,
-  200,
-  200,
-);
+```css hidden
+body {
+  font-family: monospace;
+}
 ```
 
-Zoom example:
+We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below.
+Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200:
 
 ```js
 const img = new Image();
 img.crossOrigin = "anonymous";
-img.src = "./assets/rhino.jpg";
+img.src = "/shared-assets/images/examples/rhino.jpg";
 img.onload = () => {
-  draw(this);
+  draw(img);
 };
 
-function draw(img) {
+const draw = (image) => {
   const canvas = document.getElementById("canvas");
   const ctx = canvas.getContext("2d");
-  ctx.drawImage(img, 0, 0);
+  ctx.drawImage(image, 0, 0);
 
-  const smoothedZoomCtx = document
-    .getElementById("smoothed-zoom")
-    .getContext("2d");
-  smoothedZoomCtx.imageSmoothingEnabled = true;
+  const smoothCtx = document.getElementById("smoothed").getContext("2d");
+  smoothCtx.imageSmoothingEnabled = true;
 
-  const pixelatedZoomCtx = document
-    .getElementById("pixelated-zoom")
-    .getContext("2d");
-  pixelatedZoomCtx.imageSmoothingEnabled = false;
+  const pixelatedCtx = document.getElementById("pixelated").getContext("2d");
+  pixelatedCtx.imageSmoothingEnabled = false;
 
   const zoom = (ctx, x, y) => {
     ctx.drawImage(
       canvas,
-      Math.min(Math.max(0, x - 5), img.width - 10),
-      Math.min(Math.max(0, y - 5), img.height - 10),
+      Math.min(Math.max(0, x - 5), image.width - 10),
+      Math.min(Math.max(0, y - 5), image.height - 10),
       10,
       10,
       0,
@@ -268,17 +355,13 @@ function draw(img) {
   canvas.addEventListener("mousemove", (event) => {
     const x = event.layerX;
     const y = event.layerY;
-    zoom(smoothedZoomCtx, x, y);
-    zoom(pixelatedZoomCtx, x, y);
+    zoom(smoothCtx, x, y);
+    zoom(pixelatedCtx, x, y);
   });
-}
+};
 ```
 
-The code's usage is demonstrated in the following live example:
-
-{{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/image-smoothing.html", '100%', 300)}}
-
-Also see the source code — [HTML](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/image-smoothing.html), [JavaScript](https://github.com/mdn/dom-examples/blob/main/canvas/pixel-manipulation/image-smoothing.js).
+{{embedlivesample("zooming_and_anti-aliasing", , 300)}}
 
 ## Saving images
 

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

@@ -20,8 +20,6 @@ The **`PaymentRequestEvent`** interface of the {{domxref("Payment Handler API",
 
 ## Instance properties
 
-- {{domxref("PaymentRequestEvent.instrumentKey","instrumentKey")}} {{ReadOnlyInline}} {{Deprecated_Inline}} {{Non-standard_Inline}}
-  - : Returns an object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
 - {{domxref("PaymentRequestEvent.methodData","methodData")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : Returns an array of objects containing payment method identifiers for the payment methods that the website accepts and any associated payment method specific data.
 - {{domxref("PaymentRequestEvent.modifiers","modifiers")}} {{ReadOnlyInline}} {{Experimental_Inline}}