# Tapping through virtual joystick canvas **URL:** \ **Category:** Questions\ **Created:** [June 10, 2022, 3:53pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239 "2022-06-10T15:53:05Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 10, 2022, 3:53pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/1 "2022-06-10T15:53:05Z")
How can we pick meshes or tap UI elements when using the virtual joystick? Its canvas covers the whole screen and consumes tap events. I tried resizing the joystick canvas, but that screws up its position calculations. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 10, 2022, 6:33pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/2 "2022-06-10T18:33:26Z")
Cc @RaananW and I’ll also take a look at this when possible 🙂 ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 10, 2022, 6:33pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/3 "2022-06-10T18:33:37Z")
---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 22, 2022, 1:31pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/4 "2022-06-22T13:31:28Z")
Hi! Apologies for the delay. There is documentation showing how to do that already 😃 [Virtual Joysticks | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/input/virtualJoysticks). From it: “Note: This will create an overlay canvas on top of the canvas for the scene. This will disable interaction with the Babylon GUI elements and scene pointer events. To avoid this the overlay joystick canvas’s z index can be modified to toggle between scene interaction and joysticks input as seen in the playground above. Another option would be to create a custom joystick using the Babylon GUI as described below.” ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 22, 2022, 1:32pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/5 "2022-06-22T13:32:28Z")
---
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 22, 2022, 4:35pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/6 "2022-06-22T16:35:11Z")
Hi @carolhmj, The demo on the docs page uses a HTML button… I’m using the Babylon GUI. Maybe I can make a custom joystick from DOM elements, instead of the canvas-based one. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 22, 2022, 4:52pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/7 "2022-06-22T16:52:35Z")
Then in that case the picking should work as expected. Can you share your implementation so we can see better what’s going on? ---
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 23, 2022, 12:29am UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/8 "2022-06-23T00:29:27Z")
Sorry, I don’t mean picking with rays… I meant tapping on Babylon UI elements. There’s a menu button in the corner of the screen, but it’s not clickable when the virtual joystick is shown. My solution was to change it to an HTML button, with a higher z-order. When the menu button is clicked, I hide the joystick canvas. It works, but it would be nice to resize the joystick canvas so it doesn’t have to take up the whole screen. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 23, 2022, 11:16am UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/9 "2022-06-23T11:16:48Z")
Oooh, I see what you mean now 😕 yeah, currently there is no way to resize the JoystickCanvas. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 23, 2022, 3:17pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/10 "2022-06-23T15:17:32Z")
@alekop, we are open to PR if you want to add the support for this ? ---
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 23, 2022, 4:36pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/11 "2022-06-23T16:36:53Z")
Yeah, I should… I’ll put it on my board. ---
**Author:** ![sevaseva](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@sevaseva](https://forum.babylonjs.com/u/sevaseva)\ **Post date:** [December 30, 2023, 12:33am UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/12 "2023-12-30T00:33:18Z")
To follow up on an old thread… What if many meshes in a scene are interactible, i.e. ```auto mesh.actionManager = new ActionManager(scene); mesh.actionManager.registerAction(new ExecuteCodeAction( ActionManager.OnPickTrigger, myFunctionOnPickTrigger )); ``` AND I would like to use the virtual joystick as a camera input (as one of several camera inputs, in fact, … but that is way off-topic so we downplay that here). Explicit toggling between canvases that receive the events isn’t an option here because I would like “touching and dragging” to move the camera but “tapping” (_without_ dragging) on thaty mesh call `myFunctionOnPickTrigger`. Nothing special, just the default behavior when standard mouse and touch camera inputs (and no virtual joysticks input) are used. Has anyone ever tried (succeeded?) implementing such a thing? “Forwarding” all or certain subset of events from the joysticks’ canvas to the scene canvas is one idea that comes to mind, but implementing that would’ve been very tricky, I imagine. If anyone thought about this or tried implementing, please share any ideas and experience 🙏 Thanks! seva ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [January 2, 2024, 12:28pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/13 "2024-01-02T12:28:33Z")
Maybe your case would be better suited to a custom joystick? Something like [Virtual Joysticks | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/input/virtualJoysticks#custom-joystick) ---
**Author:** ![sevaseva](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@sevaseva](https://forum.babylonjs.com/u/sevaseva)\ **Post date:** [January 4, 2024, 1:24pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/14 "2024-01-04T13:24:48Z")
@carolhmj, I appreciate that you cared to respond. To answer your question, no. The amount of work the so called “custom joystick” takes to implement is prohibitively high for for my case. Also, the “custom joysticks” example that you refer to helps convincing that it’s probably not a good idea: it crashes upon page load and doesn’t even start to work in Chrome (Linux desktop with and without a touchscreen and Android phone) and is unusable (although doesn’t crash outright) in Firefox desktop. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [January 4, 2024, 4:41pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/15 "2024-01-04T16:41:44Z")
---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [January 4, 2024, 4:42pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/16 "2024-01-04T16:42:02Z")
Adding @PolygonalSun to check the input issue ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [January 4, 2024, 7:27pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/17 "2024-01-04T19:27:30Z")
Which Android version and model are you using? I checked Chrome and FF on mine and it ran normally, even if the controls were on top of each other. But crashing is not good so I’d like to investigate that better if possible. ---
**Author:** ![sevaseva](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@sevaseva](https://forum.babylonjs.com/u/sevaseva)\ **Post date:** [January 5, 2024, 4:55am UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/18 "2024-01-05T04:55:29Z")
I connected Chrome devtools to my phone’s browser just now in order to check for errors in the console, etc, opened the page ( [https://playground.babylonjs.com/#C6V6UY#5](https://playground.babylonjs.com/#C6V6UY#5) ) and the page rendered. Not that the joysticks are usable or anything, but I think it’s now working as intended. On the desktop it also rendered completely and works as probably intended. I do see “Failed to create WebGPU Context Provide” errors in the console in both Android and Linux desktop (and I remember seeing that when opening this same URL before on Linux desktop, too), but it functions now. Yesterday and a few times I tried that before, same URL wasn’t rendering but I didn’t save the console output. If I see that again (though I am unlikely to try again), I will update this thread. For reference, the phone I tried this on previously as well as today is a Google Fi’s Moto G Stylus 2021 (or 2020?..) model. Android 11 and up-to-date Google Chrome of the stable channel. Thanks ---
**Author:** ![Eran\_Kaufman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/eran_kaufman/32/33254_2.png) [@Eran\_Kaufman](https://forum.babylonjs.com/u/Eran_Kaufman)\ **Post date:** [January 16, 2024, 7:58pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/19 "2024-01-16T19:58:13Z")
+1 Any luck here? ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [January 16, 2024, 8:08pm UTC](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239/20 "2024-01-16T20:08:21Z")
Are you having issues with the Virtual Joystick? [Next page](https://forum.babylonjs.com/t/tapping-through-virtual-joystick-canvas/31239.md?page=2)