joystick overlay only appears on first touch

src/js/input.js

@@ -23,7 +23,11 @@ const handleAngleMagnitude=(x, y, threshold=0, fn=null) => {
 
 		if(fn) fn(angle, magnitude);
 	}
-}
+};
+
+const removeChild=(parent, child) => {
+	if(child.parentNode==parent) parent.removeChild(child);
+};
 
 const handleCrosspad=(() => {
 	const ns='http://www.w3.org/2000/svg';
@@ -50,7 +54,7 @@ const handleCrosspad=(() => {
 	let enabled=false;
 	const displayOverlay=() => {
 		if(useOverlay && enabled) hud.appendChild(cross);
-		else hud.removeChild(cross);
+		else removeChild(hud, cross);
 	};
 	config.watchB('input.touchscreen.crosspad.overlay', (k, v) => {
 		useOverlay=v;
@@ -98,6 +102,7 @@ const handleJoystick=(() => {
 	let ctx=cvs.getContext('2d');
 	let enabled=false;
 	let useOverlay=false;
+	let firstTouch=false;
 
 	let center={
 		x: 0,
@@ -106,7 +111,7 @@ const handleJoystick=(() => {
 	let deadzone;
 
 	const displayOverlay=() => {
-		if(!enabled || !useOverlay) return hud.removeChild(cvs);
+		if(!enabled || !useOverlay || !firstTouch) return removeChild(hud, cvs);
 
 		cvs.width=cvs.height=4*deadzone+120;
 		hud.appendChild(cvs);
@@ -160,6 +165,7 @@ const handleJoystick=(() => {
 		touchstart: e => {
 			center.x=e.touches[0].clientX;
 			center.y=e.touches[0].clientY;
+			firstTouch=true;
 			displayOverlay();
 		},
 		touchmove: e =>