docs: Offscreen Canvas fix touch pick and 2 fingers interactions (#29983)

* docs: Offscreen Canvas fix touch pick and 2 fingers interactions

* Update offscreencanvas-w-orbitcontrols.html

---------

Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

manual/en/offscreencanvas.html

@@ -815,6 +815,7 @@ they make. That function will add the correct id and send it to the worker.</p>
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -853,6 +854,10 @@ function makeSendPropertiesHandler(properties) {
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = {type: event.type, touches};
   for (let i = 0; i &lt; event.touches.length; ++i) {
@@ -860,6 +865,8 @@ function touchEventHandler(event, sendFn) {
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);

manual/examples/offscreencanvas-w-orbitcontrols.html

@@ -34,6 +34,7 @@ const mouseEventHandler = makeSendPropertiesHandler( [
 	'pointerType',
 	'clientX',
 	'clientY',
+	'pointerId',
 	'pageX',
 	'pageY',
 ] );
@@ -84,7 +85,11 @@ function makeSendPropertiesHandler( properties ) {
 }
 
 function touchEventHandler( event, sendFn ) {
-
+	
+	// preventDefault() fixes mousemove, mouseup and mousedown 
+	// firing at touch events when doing a simple touchup touchdown
+	// Happens only at offscreen canvas
+	event.preventDefault(); 
 	const touches = [];
 	const data = { type: event.type, touches };
 	for ( let i = 0; i < event.touches.length; ++ i ) {
@@ -93,6 +98,8 @@ function touchEventHandler( event, sendFn ) {
 		touches.push( {
 			pageX: touch.pageX,
 			pageY: touch.pageY,
+			clientX: touch.clientX,
+			clientY: touch.clientY,
 		} );
 
 	}

manual/ja/offscreencanvas.html

@@ -767,6 +767,7 @@ Workerは <code class="notranslate" translate="no">ElementProxyReceiver</code>
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -805,6 +806,10 @@ function makeSendPropertiesHandler(properties) {
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = {type: event.type, touches};
   for (let i = 0; i &lt; event.touches.length; ++i) {
@@ -812,6 +817,8 @@ function touchEventHandler(event, sendFn) {
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);

manual/ko/offscreencanvas.html

@@ -717,6 +717,7 @@ class ElementProxy {
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -755,6 +756,10 @@ function makeSendPropertiesHandler(properties) {
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = { type: event.type, touches };
   for (let i = 0; i < event.touches.length; ++i) {
@@ -762,6 +767,8 @@ function touchEventHandler(event, sendFn) {
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);

manual/ru/offscreencanvas.html

@@ -748,6 +748,7 @@ class ElementProxy {
   'pointerType',
   'clientX',
   'clientY',
+  'pointerId',
   'pageX',
   'pageY',
 ]);
@@ -786,6 +787,10 @@ function makeSendPropertiesHandler(properties) {
 }
 
 function touchEventHandler(event, sendFn) {
+  // preventDefault() fixes mousemove, mouseup and mousedown 
+  // firing when doing a simple touchup touchdown
+  // Happens only at offscreen canvas
+  event.preventDefault(); 
   const touches = [];
   const data = {type: event.type, touches};
   for (let i = 0; i < event.touches.length; ++i) {
@@ -793,6 +798,8 @@ function touchEventHandler(event, sendFn) {
     touches.push({
       pageX: touch.pageX,
       pageY: touch.pageY,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
     });
   }
   sendFn(data);