Use cartesian distance for pinch zoom gesture (mdn#42728)

* Use cartesian distance for pinch zoom gesture

Pinch zoom gestures should use cartesian distance, because they are usually executed diagonally, and so that they can optionally be combined with a rotate gesture.

* Break up long line

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

---------

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

Author: atg

files/en-us/web/api/pointer_events/pinch_zoom_gestures/index.md

@@ -80,7 +80,7 @@ When this event is processed, the target's border is set to `dashed` to provide
 
 ```js
 function pointermoveHandler(ev) {
-  // This function implements a 2-pointer horizontal pinch/zoom gesture.
+  // This function implements a 2-pointer pinch/zoom gesture.
   //
   // If the distance between the two pointers has increased (zoom in),
   // the target element's background is changed to "pink" and if the
@@ -100,7 +100,10 @@ function pointermoveHandler(ev) {
   // If two pointers are down, check for pinch gestures
   if (evCache.length === 2) {
     // Calculate the distance between the two pointers
-    const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
+    const curDiff = Math.hypot(
+      evCache[0].clientX - evCache[1].clientX,
+      evCache[0].clientY - evCache[1].clientY,
+    );
 
     if (prevDiff > 0) {
       if (curDiff > prevDiff) {