Mes changements;

index.html

@@ -111,5 +111,72 @@
       }      
     }
     </script>        
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const WAIT_TIMEOUT = 3000;
+
+            //     x=0 ---->
+            // y=0
+            // |
+            // |
+            // v
+
+
+            // Experimentally found by tracking mouse positions with document.onmousemove.
+            // Values in pixels.
+            const START_BUTTON_HEIGHT = 100;
+            const START_BUTTON_WIDTH = 300;
+
+            const BOX_WIDTH = 500;
+
+            const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
+
+            //document.onmousemove = function(event) {
+            //    console.log(`x=${event.pageX}, y=${event.pageY}`);
+            //}
+
+            setTimeout(function() {
+                let $canvas = document.getElementById("#canvas");
+
+                document.addEventListener('mousedown', function(event) {
+                    console.log(`onmousedown client x=${event.clientX}, y=${event.clientY}`);
+                    console.log(`onmousedown page x=${event.pageX}, y=${event.pageY}`);
+                    console.log(event);
+                });
+
+                let x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
+                x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
+                //let x = ($canvas.width - BOX_WIDTH) / 2;
+                x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
+                x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
+
+                let y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
+                y = y + $canvas.height; // $canvas bottom
+                //let y = $canvas.height;
+                y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
+                y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
+
+                console.warn(`clicking x=${x}, y=${y}!`);
+
+                for (let name of ['mousedown', 'click']) {
+                    let click = new MouseEvent(name, {
+                        clientX: x,
+                        clientY: y,
+                        screenX: x,
+                        screenY: y,
+                        button: 0,
+                        buttons: 1,
+                        bubbles: true,
+                    });
+
+                    document.dispatchEvent(click);
+                    //$canvas.dispatchEvent(click);
+                    console.warn('click done');
+                }
+            }, WAIT_TIMEOUT);
+        });
+    </script>
+
   </body>
 </html>