Fix typos and pseudo-typos 8 (mdn#36249)

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

@@ -58,7 +58,7 @@ const contents = range.cloneContents();
 document.body.appendChild(contents);
 ```
 
-This example creates a new range, `range`, and sets its starting point to the third child node of the first element whose class is `elementclass`. The end point is set to be the middle of the first child of the span, and then the range is used to copy the contents of the range.
+This example creates a new range, `range`, and sets its starting point to the third child node of the first element. The end point is set to be the middle of the first child of the span, and then the range is used to copy the contents of the range.
 
 ### Ranges and the hierarchy of the DOM
 

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

@@ -95,7 +95,7 @@ const bufferLength = analyser.frequencyBinCount;
 const dataArray = new Uint8Array(bufferLength);
 analyser.getByteTimeDomainData(dataArray);
 
-// Connect the source to be analysed
+// Connect the source to be analyzed
 source.connect(analyser);
 
 // Get a canvas defined with ID "oscilloscope"

files/en-us/web/api/animation/playbackrate/index.md

@@ -17,7 +17,7 @@ Animations have a **playback rate** that provides a scaling factor from the rate
 Takes a number that can be 0, negative, or positive. Negative values reverse the animation. The value is a scaling factor, so for example a value of 2 would double the playback rate.
 
 > [!NOTE]
-> Setting an animation's `playbackRate` to `0` effectively pauses the animation (however, its {{domxref("Animation.playstate", "playstate")}} does not necessarily become `paused`).
+> Setting an animation's `playbackRate` to `0` effectively pauses the animation (however, its {{domxref("Animation.playState", "playState")}} does not necessarily become `paused`).
 
 ## Examples
 

files/en-us/web/api/attribution_reporting_api/registering_sources/index.md

@@ -134,7 +134,7 @@ elem.addEventListener("click", () => {
 In this case, the interaction occurs and the browser stores the source data when `Window.open()` is invoked, and the browser receives the response.
 
 > [!NOTE]
-> When setting up a [`click`](/en-US/docs/Web/API/Element/click_event) event like in the above example, it is advisable to set it on a control where a click is expected, such as a {{htmlelement("button")}} or {{htmlelement("a")}} element. This makes more sense semantically, and is more accessible to both screenreader and keyboard users.
+> When setting up a [`click`](/en-US/docs/Web/API/Element/click_event) event like in the above example, it is advisable to set it on a control where a click is expected, such as a {{htmlelement("button")}} or {{htmlelement("a")}} element. This makes more sense semantically, and is more accessible to both screen reader and keyboard users.
 
 > [!NOTE]
 > To register an attribution source via `open()`, it must be called with [transient activation](/en-US/docs/Glossary/Transient_activation) (i.e. inside a user interaction event handler such as `click`) within five seconds of user interaction.

files/en-us/web/api/audiocontext/close/index.md

@@ -34,7 +34,7 @@ The following snippet is taken from our [AudioContext states demo](https://githu
 stopBtn.onclick = () => {
   audioCtx.close().then(() => {
     startBtn.removeAttribute("disabled");
-    susresBtn.setAttribute("disabled", "disabled");
+    susResBtn.setAttribute("disabled", "disabled");
     stopBtn.setAttribute("disabled", "disabled");
   });
 };

files/en-us/web/api/audiocontext/createmediastreamsource/index.md

@@ -71,7 +71,7 @@ if (navigator.mediaDevices) {
       const audioCtx = new AudioContext();
       const source = audioCtx.createMediaStreamSource(stream);
 
-      // Create a biquadfilter
+      // Create a biquad filter
       const biquadFilter = audioCtx.createBiquadFilter();
       biquadFilter.type = "lowshelf";
       biquadFilter.frequency.value = 1000;

files/en-us/web/api/audiocontext/resume/index.md

@@ -39,14 +39,14 @@ The following snippet is taken from our [AudioContext states demo](https://githu
 the button is updated as appropriate once the promise resolves.
 
 ```js
-susresBtn.onclick = () => {
+susResBtn.onclick = () => {
   if (audioCtx.state === "running") {
     audioCtx.suspend().then(() => {
-      susresBtn.textContent = "Resume context";
+      susResBtn.textContent = "Resume context";
     });
   } else if (audioCtx.state === "suspended") {
     audioCtx.resume().then(() => {
-      susresBtn.textContent = "Suspend context";
+      susResBtn.textContent = "Suspend context";
     });
   }
 };

files/en-us/web/api/audiocontext/suspend/index.md

@@ -31,14 +31,14 @@ A {{jsxref("Promise")}} that resolves with {{jsxref('undefined')}}. The promise
 The following snippet is taken from our [AudioContext states demo](https://github.com/mdn/webaudio-examples/blob/main/audiocontext-states/index.html) ([see it running live](https://mdn.github.io/webaudio-examples/audiocontext-states/).) When the suspend/resume button is clicked, the {{domxref("BaseAudioContext/state", "AudioContext.state")}} is queried — if it is `running`, `suspend()` is called; if it is `suspended`, {{domxref("AudioContext/resume", "resume()")}} is called. In each case, the text label of the button is updated as appropriate once the promise resolves.
 
 ```js
-susresBtn.onclick = () => {
+susResBtn.onclick = () => {
   if (audioCtx.state === "running") {
     audioCtx.suspend().then(() => {
-      susresBtn.textContent = "Resume context";
+      susResBtn.textContent = "Resume context";
     });
   } else if (audioCtx.state === "suspended") {
     audioCtx.resume().then(() => {
-      susresBtn.textContent = "Suspend context";
+      susResBtn.textContent = "Suspend context";
     });
   }
 };

files/en-us/web/api/audiodestinationnode/maxchannelcount/index.md

@@ -8,7 +8,7 @@ browser-compat: api.AudioDestinationNode.maxChannelCount
 
 {{ APIRef("Web Audio API") }}
 
-The `maxchannelCount` property of the {{ domxref("AudioDestinationNode") }} interface is an `unsigned long` defining the maximum amount of channels that the physical device can handle.
+The `maxChannelCount` property of the {{ domxref("AudioDestinationNode") }} interface is an `unsigned long` defining the maximum amount of channels that the physical device can handle.
 
 The {{domxref("AudioNode.channelCount")}} property can be set between 0 and this value (both included). If `maxChannelCount` is `0`, like in {{domxref("OfflineAudioContext")}}, the channel count cannot be changed.
 

files/en-us/web/api/authenticatorattestationresponse/attestationobject/index.md

@@ -15,7 +15,7 @@ entire `attestationObject` with a private key that is stored in the
 authenticator when it is manufactured.
 
 As part of the {{domxref("CredentialsContainer.create()")}} call, an authenticator will
-create a new keypair as well as an `attestationObject` for that keypair. The public key
+create a new key pair as well as an `attestationObject` for that key pair. The public key
 that corresponds to the private key that has created the attestation signature is well
 known; however, there are various well known attestation public key chains for different
 ecosystems (for example, Android or TPM attestations).

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

@@ -23,7 +23,7 @@ new BeforeInstallPromptEvent(type, eventInitDict)
 ### Parameters
 
 - `type`
-  - : A string with the name of the event, set to `beforeinstallpromptevent`.
+  - : A string with the name of the event, set to `beforeinstallprompt`.
 - `eventInitDict` {{optional_inline}}
   - : An object with a single optional property `platforms`, which is an array of strings, listing the platforms on which the event will be dispatched.
 

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

@@ -250,7 +250,7 @@ draw();
 
 {{EmbedLiveSample("A_lineWidth_example", "", "160")}}
 
-Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.
+Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between grid lines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.
 
 ![Three coordinate grids. The grid lines are actual pixels on the screen. The top left corner of each grid is labeled (0,0). In the first grid, a rectangle from (2,1) to (5,5) is filled in light-red color. In the second grid, (3,1) to (3,5) is joined with a 1-pixel thick royal blue line. The royal-blue line is centered on a grid line, extends from 2.5 to 3.5 on the x access, halfway into the pixels on either side of the graph line, with a light blue background on either side extending from 2 to 4 on the x-access. To avoid the light blue blur extension of the line in the second coordinate grid, the path in, the third coordinate grid is a royal-blue from line (3.5,1) to (3.5,5). The 1 pixel line width ends up completely and precisely filling a single pixel vertical line.](canvas-grid.png)
 
@@ -259,7 +259,7 @@ If you consider a path from (3,1) to (3,5) with a line thickness of `1.0`, you e
 To fix this, you have to be very precise in your path creation. Knowing that a `1.0` width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the `1.0` line width ends up completely and precisely filling a single pixel vertical line.
 
 > [!NOTE]
-> Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current `lineCap` style whose default value is `butt`; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the `lineCap` style to `square`, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).
+> Be aware that in our vertical line example, the Y position still referenced an integer grid line position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current `lineCap` style whose default value is `butt`; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the `lineCap` style to `square`, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).
 >
 > Note also that only start and final endpoints of a path are affected: if a path is closed with `closePath()`, there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the `lineJoin` style, whose default value is `miter`, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical. See the next two sections for demonstrations of these additional line styles.
 
@@ -515,19 +515,19 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
 
   // Create gradients
-  const lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, "#00ABEB");
-  lingrad.addColorStop(0.5, "#fff");
-  lingrad.addColorStop(0.5, "#26C000");
-  lingrad.addColorStop(1, "#fff");
+  const linGrad = ctx.createLinearGradient(0, 0, 0, 150);
+  linGrad.addColorStop(0, "#00ABEB");
+  linGrad.addColorStop(0.5, "#fff");
+  linGrad.addColorStop(0.5, "#26C000");
+  linGrad.addColorStop(1, "#fff");
 
-  const lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, "#000");
-  lingrad2.addColorStop(1, "rgb(0 0 0 / 0%)");
+  const linGrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  linGrad2.addColorStop(0.5, "#000");
+  linGrad2.addColorStop(1, "rgb(0 0 0 / 0%)");
 
   // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
+  ctx.fillStyle = linGrad;
+  ctx.strokeStyle = linGrad2;
 
   // draw shapes
   ctx.fillRect(10, 10, 130, 130);
@@ -558,34 +558,34 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
 
   // Create gradients
-  const radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
-  radgrad.addColorStop(0, "#A7D30C");
-  radgrad.addColorStop(0.9, "#019F62");
-  radgrad.addColorStop(1, "rgb(1 159 98 / 0%)");
-
-  const radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
-  radgrad2.addColorStop(0, "#FF5F98");
-  radgrad2.addColorStop(0.75, "#FF0188");
-  radgrad2.addColorStop(1, "rgb(255 1 136 / 0%)");
-
-  const radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
-  radgrad3.addColorStop(0, "#00C9FF");
-  radgrad3.addColorStop(0.8, "#00B5E2");
-  radgrad3.addColorStop(1, "rgb(0 201 255 / 0%)");
-
-  const radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
-  radgrad4.addColorStop(0, "#F4F201");
-  radgrad4.addColorStop(0.8, "#E4C700");
-  radgrad4.addColorStop(1, "rgb(228 199 0 / 0%)");
+  const radGrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radGrad.addColorStop(0, "#A7D30C");
+  radGrad.addColorStop(0.9, "#019F62");
+  radGrad.addColorStop(1, "rgb(1 159 98 / 0%)");
+
+  const radGrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radGrad2.addColorStop(0, "#FF5F98");
+  radGrad2.addColorStop(0.75, "#FF0188");
+  radGrad2.addColorStop(1, "rgb(255 1 136 / 0%)");
+
+  const radGrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radGrad3.addColorStop(0, "#00C9FF");
+  radGrad3.addColorStop(0.8, "#00B5E2");
+  radGrad3.addColorStop(1, "rgb(0 201 255 / 0%)");
+
+  const radGrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radGrad4.addColorStop(0, "#F4F201");
+  radGrad4.addColorStop(0.8, "#E4C700");
+  radGrad4.addColorStop(1, "rgb(228 199 0 / 0%)");
 
   // draw shapes
-  ctx.fillStyle = radgrad4;
+  ctx.fillStyle = radGrad4;
   ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad3;
+  ctx.fillStyle = radGrad3;
   ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad2;
+  ctx.fillStyle = radGrad2;
   ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad;
+  ctx.fillStyle = radGrad;
   ctx.fillRect(0, 0, 150, 150);
 }
 ```
@@ -674,8 +674,8 @@ We use this method to create a {{domxref("CanvasPattern")}} object which is very
 
 ```js
 const img = new Image();
-img.src = "someimage.png";
-const ptrn = ctx.createPattern(img, "repeat");
+img.src = "some-image.png";
+const pattern = ctx.createPattern(img, "repeat");
 ```
 
 > [!NOTE]
@@ -691,11 +691,11 @@ function draw() {
 
   // create new image object to use as pattern
   const img = new Image();
-  img.src = "canvas_createpattern.png";
+  img.src = "canvas_create_pattern.png";
   img.onload = () => {
     // create pattern
-    const ptrn = ctx.createPattern(img, "repeat");
-    ctx.fillStyle = ptrn;
+    const pattern = ctx.createPattern(img, "repeat");
+    ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, 150, 150);
   };
 }

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

@@ -48,11 +48,11 @@ function draw() {
   ctx.clip();
 
   // Draw background
-  const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
-  lingrad.addColorStop(0, "#232256");
-  lingrad.addColorStop(1, "#143778");
+  const linGrad = ctx.createLinearGradient(0, -75, 0, 75);
+  linGrad.addColorStop(0, "#232256");
+  linGrad.addColorStop(1, "#143778");
 
-  ctx.fillStyle = lingrad;
+  ctx.fillStyle = linGrad;
   ctx.fillRect(-75, -75, 150, 150);
 
   generateStars(ctx);
@@ -131,11 +131,11 @@ function draw() {
     ctx.clip();
 
     // Draw background
-    const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
-    lingrad.addColorStop(0, "#232256");
-    lingrad.addColorStop(1, "#143778");
+    const linGrad = ctx.createLinearGradient(0, -75, 0, 75);
+    linGrad.addColorStop(0, "#232256");
+    linGrad.addColorStop(1, "#143778");
 
-    ctx.fillStyle = lingrad;
+    ctx.fillStyle = linGrad;
     ctx.fillRect(-75, -75, 150, 150);
 
     generateStars(ctx);

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

@@ -213,7 +213,7 @@ With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage(
 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
-zoomctx.drawImage(
+zoomCtx.drawImage(
   canvas,
   Math.min(Math.max(0, x - 5), img.width - 10),
   Math.min(Math.max(0, y - 5), img.height - 10),

files/en-us/web/api/canvaspattern/settransform/index.md

@@ -51,7 +51,7 @@ const ctx = canvas.getContext("2d");
 const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
 
 const img = new Image();
-img.src = "canvas_createpattern.png";
+img.src = "canvas_create_pattern.png";
 
 img.onload = () => {
   const pattern = ctx.createPattern(img, "repeat");
@@ -73,7 +73,7 @@ Here's an editable demo of the code snippet above. Try changing the argument to
 </div>
 <textarea id="code" class="playable-code" style="height:120px">
 const img = new Image();
-img.src = 'canvas_createpattern.png';
+img.src = 'canvas_create_pattern.png';
 img.onload = () => {
   const pattern = ctx.createPattern(img, 'repeat');
   pattern.setTransform(matrix.rotate(-45).scale(1.5));

files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md

@@ -631,7 +631,7 @@ can be used to change an underlined element that is in focus.
     return [-1]; // no hit
   }
 
-  /* Handle a mouse move for either a mousemove event or mouseentry */
+  /* Handle a mouse move for either a mousemove event or mouseenter */
   function doMouseMove(pointCursor, rBtnDown) {
     /* Test for active move. If so, move accordingly based on the
      * cursor position. The right button down flag handles the case

files/en-us/web/api/canvasrenderingcontext2d/createpattern/index.md

@@ -63,7 +63,7 @@ Once created, the pattern is assigned to the canvas context's fill style and app
 
 The original image looks like this:
 
-![A flowery pattern](canvas_createpattern.png)
+![A flowery pattern](canvas_create_pattern.png)
 
 #### HTML
 
@@ -78,7 +78,7 @@ const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
 const img = new Image();
-img.src = "canvas_createpattern.png";
+img.src = "canvas_create_pattern.png";
 // Only use the image after it's loaded
 img.onload = () => {
   const pattern = ctx.createPattern(img, "repeat");

files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md

@@ -308,28 +308,28 @@ const colorSphere = (element) => {
   const halfWidth = width / 2;
   const rotate = (1 / 360) * Math.PI * 2; // per degree
   const offset = 0; // scrollbar offset
-  const oleft = -20;
-  const otop = -20;
+  const oLeft = -20;
+  const oTop = -20;
   for (let n = 0; n <= 359; n++) {
     const gradient = ctx.createLinearGradient(
-      oleft + halfWidth,
-      otop,
-      oleft + halfWidth,
-      otop + halfWidth,
+      oLeft + halfWidth,
+      oTop,
+      oLeft + halfWidth,
+      oTop + halfWidth,
     );
     const color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
     gradient.addColorStop(0, "rgb(0 0 0 / 0%)");
     gradient.addColorStop(0.7, `rgb(${color.R} ${color.G} ${color.B} / 100%)`);
     gradient.addColorStop(1, "rgb(255 255 255 / 100%)");
     ctx.beginPath();
-    ctx.moveTo(oleft + halfWidth, otop);
-    ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-    ctx.lineTo(oleft + halfWidth + 6, otop);
+    ctx.moveTo(oLeft + halfWidth, oTop);
+    ctx.lineTo(oLeft + halfWidth, oTop + halfWidth);
+    ctx.lineTo(oLeft + halfWidth + 6, oTop);
     ctx.fillStyle = gradient;
     ctx.fill();
-    ctx.translate(oleft + halfWidth, otop + halfWidth);
+    ctx.translate(oLeft + halfWidth, oTop + halfWidth);
     ctx.rotate(rotate);
-    ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    ctx.translate(-(oLeft + halfWidth), -(oTop + halfWidth));
   }
   ctx.beginPath();
   ctx.fillStyle = "#00f";

files/en-us/web/api/canvasrenderingcontext2d/imagesmoothingquality/index.md

@@ -49,7 +49,7 @@ const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
 let img = new Image();
-img.src = "canvas_createpattern.png";
+img.src = "canvas_create_pattern.png";
 img.onload = () => {
   ctx.imageSmoothingQuality = "low";
   ctx.drawImage(img, 0, 0, 300, 150);

files/en-us/web/api/canvasrenderingcontext2d/reset/index.md

@@ -88,9 +88,9 @@ drawRect();
 
 // Toggle between circle and rectangle using button
 let toggle = true;
-const mybutton = document.getElementById("toggle-reset");
+const myButton = document.getElementById("toggle-reset");
 
-mybutton.addEventListener("click", () => {
+myButton.addEventListener("click", () => {
   ctx.reset(); // Clear the context!
   if (toggle) {
     drawCircle();