As I work on developing a HTML5 canvas-based game within a WebView of an existing application, I encounter a puzzling issue. Upon the initial run of the game, everything seems to be in order - logs indicate that it's ready and running, yet nothing is displayed within the WebView. Oddly enough, if I switch to something else in the WebView and then return to the game, it suddenly loads and renders without any problems. What could be causing this strange behavior of the canvas not displaying on the first run but working fine on subsequent reloads?
Here are some more details:
- No console errors pop up when the game is loaded for the first time.
- The game runs smoothly in the iOS version of the app.
- The CSS styling applied to the canvas element does not render initially, indicating that it's not an issue with loading assets before display.
All my past issues stemmed from trying to render assets prematurely, which were resolved once cached images were displayed upon subsequent reloads. However, I can't seem to pinpoint why the canvas fails to display at all specifically on Android.
This is the HTML code being loaded into the WebView:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Darts</title>
<meta name="description" content="Darts GamePad Game">
<script src="js/dummy-gamepad-functions.js"></script>
<script src="js/libs/polyfill.js"></script>
<script src="js/gamepad-client.js"></script>
<script src="js/darts-boot.js"></script>
<script src="js/darts-loader.js"></script>
<link rel="stylesheet" href="css/darts.css">
</head>
<body onload=bootGame()>
<div id="darts-game-container"></div>
</body>
</html>
Below is the script used for the onload function:
var bootGame = () => {
//create canvas element
let canvas = document.createElement('canvas');
canvas.id = "darts-canvas";
canvas.width = 740;
canvas.height = 400;
let gameContainer = document.getElementById("darts-game-container");
gameContainer.appendChild(canvas);
//scale canvas to view window
let gamepadViewport = document.getElementById("darts-game-container"),
gamepadCanvas = document.getElementById("darts-canvas"),
viewportWidth = window.innerWidth,
canvasWidth = gamepadCanvas.width,
viewportHeight = window.innerHeight,
canvasHeight = gamepadCanvas.height;
let scaleRatio = Math.min(viewportWidth/canvasWidth, viewportHeight/canvasHeight);
if (scaleRatio < 1) {
gamepadViewport.style.transform = `scale(${scaleRatio}, ${scaleRatio})`;
gamepadViewport.style.webkitTransform = `scale(${scaleRatio}, ${scaleRatio})`;
gamepadViewport.style.mozTransform = `scale(${scaleRatio}, ${scaleRatio})`;
gamepadViewport.style.oTransform = `scale(${scaleRatio}, ${scaleRatio})`;
}
//initialize Loader
Darts.Loader = new Loader();
//initialize GamePad API, then initialize core classes when loaded
GamePadClient = new GamePadClient();
GamePadClient.initialize()
.then(() => {
//load all scripts
return Darts.Loader.loadScripts(LIBS_TO_LOAD, COMMON_LIB_PATH, LIB_NAME_SUFFIX)
})
.then(() => {
return Darts.Loader.loadScripts(SCRIPTS_TO_LOAD, COMMON_SCRIPT_PATH, SCRIPT_NAME_SUFFIX)
})
.then(() => {
//initialize core classes
Darts.Controller = new Controller();
Darts.Logic = new Logic();
Darts.Display = new Display();
Darts.GameProps = new GameProps();
Darts.GameState = new GameState();
//loads display elements and scripts, then initializes game once complete
Darts.Controller.initGame();
});
}