javascript - Undefined ctx variable - Stack Overflow

admin管理员组

文章数量:1327583

I have a script which keeps telling me ctx is undefined but yet a different variable is still set in the script which was made at the same place... so im confused why one variable is set and not the other.

The error is: Uncaught ReferenceError: ctx is not defined on line 32 (i mented line 32)

Yet var canvas is defined =/

This is my script:

var tiles = Array("1.png","0.png"); 
var loaded = 0; 
var loadTimer; 


function loadimg(){
 var tileImg = new Array();
for(var i=0;i<tiles.length;i++){
    tileImg[i] = new Image();
    tileImg[i].src = tiles[i]; 
    tileImg[i].onload = function(){ 
        loaded++;
    }
  }
}

function loadall(){ 
if(loaded == tiles.length){
    clearInterval(loadTimer);
    loadTimer = setInterval(gameUpdate,100); 
 }
} 

function gameUpdate(){ 
ctx.clearRect(0,0,canvas.width,canvas.height); //line 32
draw();
}

function init(){
var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d"); 
loadimg(); 
loadTimer = setInterval(loadall,100);
}

Hope you can help explain my mistake.

I have a script which keeps telling me ctx is undefined but yet a different variable is still set in the script which was made at the same place... so im confused why one variable is set and not the other.

The error is: Uncaught ReferenceError: ctx is not defined on line 32 (i mented line 32)

Yet var canvas is defined =/

This is my script:

var tiles = Array("1.png","0.png"); 
var loaded = 0; 
var loadTimer; 


function loadimg(){
 var tileImg = new Array();
for(var i=0;i<tiles.length;i++){
    tileImg[i] = new Image();
    tileImg[i].src = tiles[i]; 
    tileImg[i].onload = function(){ 
        loaded++;
    }
  }
}

function loadall(){ 
if(loaded == tiles.length){
    clearInterval(loadTimer);
    loadTimer = setInterval(gameUpdate,100); 
 }
} 

function gameUpdate(){ 
ctx.clearRect(0,0,canvas.width,canvas.height); //line 32
draw();
}

function init(){
var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d"); 
loadimg(); 
loadTimer = setInterval(loadall,100);
}

Hope you can help explain my mistake.

• javascript

Share Improve this question Follow asked Feb 25, 2012 at 22:55 SirSir 8,2771717 gold badges8888 silver badges154154 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

It's all about scope, the variable will only exist in the block of code it is defined. Move your definitions to the top of the code.

var tiles = Array("1.png","0.png"); 
var loaded = 0; 
var loadTimer; 
var ctx;
var canvas;

function loadimg(){
 var tileImg = new Array();
for(var i=0;i<tiles.length;i++){
    tileImg[i] = new Image();
    tileImg[i].src = tiles[i]; 
    tileImg[i].onload = function(){ 
        loaded++;
    }
  }
}

function loadall(){ 
if(loaded == tiles.length){
    clearInterval(loadTimer);
    loadTimer = setInterval(gameUpdate,100); 
 }
} 

function gameUpdate(){ 
ctx.clearRect(0,0,canvas.width,canvas.height); //line 32
draw();
}

function init(){
canvas = document.getElementById("canvas");  
ctx = canvas.getContext("2d"); 
loadimg(); 
loadTimer = setInterval(loadall,100);
}

As you define ctx within the init-function, ctx will be private to that function, thus not available at line 32. The execution stops at ctx, since it isn't available inside gameupdate(), therefore you don't get an error about canvas (yet!). If you make ctx available to all functions by declaring it outside the init-function, your error will move to the canvas-variable (since that is private to init-function as well), stating that canvas isn't declared.

To make the variables available to all functions, do the declaration at the top of your script, outside the function. Then remove the var keyword from you init-function and simply assign the variables instead:

var ctx, canvas;

// ... all your functions

function init(){
   canvas = document.getElementById("canvas");  
   ctx = canvas.getContext("2d"); 
   loadimg(); 
   loadTimer = setInterval(loadall,100);
}

For more information on variable scoping in JavaScript, have a look at this MDN article.

I can only guess, but in order for this to work:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

You need to have a

<canvas id="canvas"></canvas>

Element in your html.

Otherwise, getElementById("canvas") will not return a canvas and canvas.getContext("2d"); will not set the ctx var.

EDIT: also see DJohnson's post regarding the scope of your canvas and ctx variables.

If you omit the var keyword, the scope of a variable will be global. see: Javascript variable scope

In your sample, you have defined it locally using

function init(){
    var ctx = canvas.getContext("2d");
}

That is why you cannot access it in another function (and that is also what is different from the reference you posted).

So this would work:

function init(){
    ctx = canvas.getContext("2d"); // not var keyword
}

And this would be proper:

var ctx;

function init(){
    ctx = canvas.getContext("2d");
}

本文标签： javascriptUndefined ctx variableStack Overflow