Databases
StackOverflow2013
Postsdbo
POUncaught ReferenceError: ctx is not defined
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUncaught ReferenceError: ctx is not defined
    text
    copied!<p>I've tried everything to solve this problem and nothings working. Posting here is my last resort.</p> <p>I'm trying to code a simple canvas element and load everything dynamically and nothing is working. I keep getting the error in Google console "Uncaught ReferenceError: ctx is not defined" on game.js:33.</p> <p>I originally thought it was because common.js is being loaded after the other 2 javascript files so I made a loader file which loads each JS file in the order I want. I did this using $.getScript() and the $.when() function . Unfortunately, this did not work. So the ctx var is being loaded but it's giving me the error for some reason.</p> <p>I've included the files below. Thanks in advance for any help.</p> <p>EDIT: I just tried taking all the code out of each individual JS file and putting them in the same one in the order they are meant to be in and it works fine now. But it would be nice to know why it was not working at all. As it's going to get very hectic having all my code in 1 file. Thank you.</p> <p><strong>index.php</strong></p> <pre><code>&lt;!doctype&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Game - Unknown&lt;/title&gt; &lt;link rel="stylesheet" href="./assets/css/default.css"&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"&gt;&lt;/script&gt; &lt;!--&lt;script src="./assets/js/loader.js"&gt;&lt;/script&gt;--&gt; &lt;script src="./assets/js/common.js"&gt;&lt;/script&gt; &lt;script src="./assets/js/graphics.js"&gt;&lt;/script&gt; &lt;script src="./assets/js/game.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="viewport"&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>common.js</strong></p> <pre><code> $(document).ready(function(){ // Setup the canvas game context for 2D var canvas = document.getElementById("viewport"); var ctx = canvas.getContext("2d"); // Update the canvas dimensions to match window size when changed $(window).resize(function(){canvasResize()}); canvasResize(); function canvasResize(){ var cWidth = window.innerWidth; var cHeight = window.innerHeight; canvas.width = cWidth; canvas.height = cHeight; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000'; ctx.fillRect(0, 0, cWidth, cHeight); } // Get center of things - Useful for centering images on canvas function getCenter(dim){ return dim / 2 } }); </code></pre> <p><strong>graphics.js</strong></p> <pre><code> $(document).ready(function(){ function gfxTile(x, y, w, h, r, g, b, a) { ctx.fillStyle = "rgb(60, 60, 100)"; ctx.beginPath(); //ctx.moveTo(x + h / 2, y + w / 2); ctx.moveTo(10, 10); ctx.lineTo(105, 25); ctx.lineTo(25, 105); ctx.lineTo(25, 105); ctx.closePath(); ctx.fill(); } }); </code></pre> <p><strong>game.js</strong></p> <pre><code> $(document).ready(function(){ // START TEMPORARY var mapSizeX = 10; var mapSizeY = 10; var mapArray = new Array(); function createMap() { for(x = 0; x &lt; mapSizeX; x++) { mapArray[x] = []; for(y = 0; y &lt; mapSizeY; y++) { mapArray[x][y] = 0; } } } // END TEMPORARY setInterval(mainLoop, 50); function mainLoop() { //gfxTile(10, 10, 40, 40, 50, 50, 50, 100); ctx.clearRect(0, 0, canvas.width, canvas.height); } }); </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