title: HTML5 - Canvas not rendering on first load in Android WebView
body: <p>I'm developing an HTML5 canvas-based game that's running in a WebView within an existing application. On first running the game, it loads successfully in the background, and all logs suggest it's ready and running. However, nothing is displayed in the WebView. If I load something else into the WebView and then return to my game, it loads successfully as before, and then renders. What could prevent a canvas from displaying on first being run, only to work on subsequent reloads?</p>
  
  <p>For detail:</p>
  
  <ul>
  <li>I get no console errors on loading the game for the first time.</li>
  <li>The game loads successfully when running in the iOS version of the application.</li>
  <li>The CSS applied to the canvas element doesn't render, suggesting it isn't an issue loading my assets before displaying them.</li>
  </ul>
  
  <p>All the issues I've investigated were caused by trying to render assets before they were displayed, so subsequent reloads were fixed by these now cached images being displayed, but I can't find anything concerning the canvas failing to display at all in  Android.</p>
  
  <p>Here's the HTML loaded by the WebView:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"&gt;
    &lt;title&gt;Darts&lt;/title&gt;
    &lt;meta name="description" content="Darts GamePad Game"&gt;
    &lt;script src="js/dummy-gamepad-functions.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/polyfill.js"&gt;&lt;/script&gt;
    &lt;script src="js/gamepad-client.js"&gt;&lt;/script&gt;
    &lt;script src="js/darts-boot.js"&gt;&lt;/script&gt;
    &lt;script src="js/darts-loader.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="css/darts.css"&gt;
  &lt;/head&gt;
  
  &lt;body onload=bootGame()&gt;
    &lt;div id="darts-game-container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my onload script:</p>
  
  <pre><code>var bootGame = () =&gt; {
  
    //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 &lt; 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})`;
    }
  
    //initialise Loader
    Darts.Loader = new Loader();
  
    //initialise GamePad API, then initialise core classes when loaded
    GamePadClient = new GamePadClient();
    GamePadClient.initialise()
      .then(() =&gt; {
  
        //load all scripts
        return Darts.Loader.loadScripts(LIBS_TO_LOAD, COMMON_LIB_PATH, LIB_NAME_SUFFIX)
      })
      .then(() =&gt; {
        return Darts.Loader.loadScripts(SCRIPTS_TO_LOAD, COMMON_SCRIPT_PATH, SCRIPT_NAME_SUFFIX)
      })
      .then(() =&gt; {
        //initalise 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 inits game once complete
        Darts.Controller.initGame();
      });
  
  }
  </code></pre>