Repository: godot
Issue: Cannot have multiple engine running on same web page
Labels: enhancement,platform:web,topic:porting

**Godot version:**
3.2.4 beta4 mono version


**OS/device including version:**
Windows 10 using HTML export


**Issue description:**
This is a following to #44368. Now that the viewport ID is fixed in 3.2.4 beta I tried to put multiple viewports (with each its own engine and canvas). The problem is that only the first viewport is rendered as seen in this screenshot:

![image](https://user-images.githubusercontent.com/1208646/103098321-9e09ed00-460a-11eb-9d9a-d114526b69b5.png)


**Steps to reproduce:**

1. Download 3.2.4 beta4 mono version. 
2. Create a project with a single scene containing a camera and a cube mesh
3. Optionally, crate a C# script to make the cube mesh oscillate (to validate C# scripting working on the web)
4. Export to HTML
5. Tweak the generated HTML page so it contains the following:

````html
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, user-scalable=no' />
	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
	<title>bugs</title>
	<style type='text/css'>

		body {
			touch-action: none;
			margin: 0;
			border: 0 none;
			padding: 0;
			text-align: center;
			background-color: grey;
		}

		#canvas {
			display: block;
			margin: 0;
			color: white;
			background-color: red;
		}

		#canvas:focus {
			outline: none;
		}

		#canvas1 {
			display: block;
			margin: 0;
			color: white;
			background-color: green;
		}

		#canvas1:focus {
			outline: none;
		}

		#canvas2 {
			display: block;
			margin: 0;
			color: white;
			background-color: blue;
		}

		#canvas2:focus {
			outline: none;
		}

		.godot {
			font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
			color: #e0e0e0;
			background-color: #3b3943;
			background-image: linear-gradient(to bottom, #403e48, #35333c);
			border: 1px solid #45434e;
			box-shadow: 0 0 1px 1px #2f2d35;
		}

	</style>

</head>
<body>
	<canvas id='canvas1' width="300" height="300">
		HTML5 canvas appears to be unsupported in the current browser.<br />
		Please try updating or use a different browser.
	</canvas>
	<canvas id='canvas2' width="300" height="300">
		HTML5 canvas appears to be unsupported in the current browser.<br />
		Please try updating or use a different browser.
	</canvas>

	<script type='text/javascript' src='bugs.js'></script>
	<script type='text/javascript'>//<![CDATA[

		
		var initGame = function(canvasName) {

			var engine = new Engine();
			var setStatusMode;
			var setStatusNotice;

			const EXECUTABLE_NAME = 'bugs';
			const MAIN_PACK = 'bugs.pck';
			const GDNATIVE_LIBS = [];
			const INDETERMINATE_STATUS_STEP_MS = 100;
			const FULL_WINDOW = false;

			var canvas = document.getElementById(canvasName);
		
			var initializing = true;
			var statusMode = 'hidden';
			var lastWidth = 0;
			var lastHeight = 0;
			var lastScale = 0;

			var animationCallbacks = [];
			function animate(time) {
				animationCallbacks.forEach(callback => callback(time));
				requestAnimationFrame(animate);
			}
			requestAnimationFrame(animate);

			function adjustCanvasDimensions() {
				const scale = window.devicePixelRatio || 1;
				if (lastWidth != window.innerWidth || lastHeight != window.innerHeight || lastScale != scale) {
					lastScale = scale;
					lastWidth = window.innerWidth / 2;
					lastHeight = window.innerHeight / 2;
					canvas.width = Math.floor(lastWidth * scale);
					canvas.height = Math.floor(lastHeight * scale);
					canvas.style.width = lastWidth + "px";
					canvas.style.height = lastHeight + "px";
				}
			}
			if (FULL_WINDOW) {
				animationCallbacks.push(adjustCanvasDimensions);
				adjustCanvasDimensions();
			} else {
				engine.setCanvasResizedOnStart(false);
			}

			if (!Engine.isWebGLAvailable()) {
			} else {
				engine.setCanvas(canvas);
				engine.setGDNativeLibraries(GDNATIVE_LIBS);
				engine.startGame(EXECUTABLE_NAME, MAIN_PACK).then(() => {
					initializing = false;
				}, function() {console.log("failure"); });
			}
		};

		initGame("canvas1");
		initGame("canvas2");
	//]]></script>
</body>
</html>

````


**Minimal reproduction project:**
[test324.zip](https://github.com/godotengine/godot/files/5740107/test324.zip)