I am working on converting a simple HTML5 Snake game that utilizes canvas into a Chrome App. Below is the snippet of my original HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Snake</title>
<link rel="stylesheet" href="snake.css">
</head>
<body>
<canvas id="canvas" width="700" height="700"></canvas>
<script type="text/javascript" src="food.js"></script>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" src="point.js"></script>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
Due to restrictions, I had to move the script section from the HTML file to main.js which creates the window. I have replicated the window.onload function as a callback in the Chrome app equivalent:
chrome.app.runtime.onLaunched.addListener(function() {
"use strict";
chrome.app.window.create('snake.html', {
bounds: {
width: 800,
height: 800
}
}, function() {
var canvas = document.getElementById("canvas"),
game = new Game(canvas, new Snake(canvas), new Food(canvas));
game.init();
game.run();
});
});
Despite the canvas being visible in the app window, when trying to access it using document.getElementById, it returns null. This issue arises even after the DOM appears to load completely. The developer tools indicate only the scripts are loaded. Can someone guide me on what might be causing this problem? Where should I turn for accessing the DOM if window.onload does not work?