Databases
StackOverflow2013
Postsdbo
POWhy does my HTML5 page crash when loaded from web when it doesn't locally
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does my HTML5 page crash when loaded from web when it doesn't locally
    text
    copied!<p>Completely new to HTML5 I started playing around with canvas. This is my first ever canvas page.</p> <p>It works perfectly when you run it locally (i.e. file:///), but when I upload the files to either of my webhost, the page is stuck while loading. The loading icon is spinning and the title appears, but page body is never retrieved, so obviously it gets stuck in the head somewhere.</p> <p>Below is my code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;1st Attempt - 2D Canvas&lt;/title&gt; &lt;meta charset='utf-8'&gt; &lt;script type="text/javascript"&gt; window.addEventListener('load', function () { canvas = document.getElementById('gamecanvas'); context = canvas.getContext('2d'); if(context){ // Load images and stuff sprites = loadResources(); // Create player object player = {"pos": {"x": 0, "y": 0}, "blockunder": sprites.grass}; // Draw a grid with a texture and stroke using my own awesome function drawGrid(sprites.grass, false); drawPlayer(0, 0); // Define controls window.onkeydown = function(event){ switch(event.which){ case 37: // ArrowLeft movePlayer("left"); break; case 38: // ArrowUp movePlayer("up"); break; case 39: // ArrowRight movePlayer("right"); break; case 40: // ArrowDown movePlayer("down"); break; } } } }, false); function loadResources(){ // Sprites var grass = new Image(); grass.src = 'gfx/grass.png'; var player = new Image(); player.src = 'gfx/player.png'; console.log("Loaded all resources"); return {"player": player, "grass": grass}; } function drawGrid(bgImage, drawStroke){ cellWidth = bgImage.width; cellHeight = bgImage.height; console.log("Texture dimensions are " + cellWidth + "x" + cellHeight + " pixels"); canvasWidth = context.canvas.getAttribute("width"); canvasHeight = context.canvas.getAttribute("height"); var curX = 0; var curY = 0; context.strokeStyle = '#444'; context.lineWidth = 1; while(curX &lt; canvasWidth){ while(curY &lt; canvasHeight){ context.drawImage(bgImage, curX, curY); if(drawStroke){ context.strokeRect(curX, curY, curX + cellWidth, curY + cellHeight); } curY += cellHeight; } curY = 0; curX += cellWidth; } } function movePlayer(direction){ switch(direction){ case "left": drawPlayer(-cellWidth, 0); break; case "up": drawPlayer(0, -cellWidth); break; case "right": drawPlayer(cellWidth, 0); break; case "down": drawPlayer(0, cellWidth); break; } } function drawPlayer(addX, addY){ addX = typeof addX !== 'undefined' ? addX : 0; addY = typeof addY !== 'undefined' ? addY : 0; context.drawImage(player.blockunder, player.pos.x, player.pos.y); if(player.pos.x + addX &gt;= 0 &amp;&amp; player.pos.x + addX &lt; canvasWidth){ player.pos.x += addX; } if(player.pos.y + addY &gt;= 0 &amp;&amp; player.pos.y + addY &lt; canvasHeight){ player.pos.y += addY; } context.drawImage(sprites.player, player.pos.x, player.pos.y); } &lt;/script&gt; &lt;/head&gt; &lt;body style="text-align: center;"&gt; &lt;h1&gt;Run Steve!&lt;/h1&gt; &lt;canvas id="gamecanvas" height="608" width="800"&gt;Canvas is not supported.&lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload