So, I’ve got a constructor for a splash screen. I’m using canvas graphics (ctx below is a reference to 2d context of the canvas element), but it seems when I try and get a local copy of the context that I lose it. Does someone have an idea why it becomes undefined where it does?(see below)
function SplashScreen(_ctx)
{
this.loadScene = function()
{
this.img = new Image();
this.img.onload = this.render;
this.img.src = 'art/SplashScreen.png';
};
this.unloadScene = function()
{
delete this.img;
this.img = null;
CollectGarbage();
};
this.render = function()
{
alert(this.ctx);//<--------------undefined
alert(this.img);//<--------------undefined
this.ctx.drawImage(this.img,0,0);
};
alert(_ctx); //<--------------properly defined
this.ctx = _ctx;
alert(this.ctx);//<--------------properly defined
return this;
}
Here is where I’m calling SplashScreen(note: the below is from main.js, and the above is in splashscreen.js):
var ctx;
var scene_Splash;
var currentScene;
function main()
{
ctx = document.getElementById('canvas').getContext('2d');
alert(ctx); //<-------fine and defined
scene_Splash = new SplashScreen(ctx);
changeScene(scene_Splash, null, null);
}
function changeScene(_newScene, _transition, _time)
{
currentScene = _newScene;
currentScene.loadScene();
}
Expanding on this even further, here is the part of the index.html file that is referencing these scripts:
<html>
<head>
<script language="JavaScript" type="text/javascript" src="splashscreen.js"></script>
<script language="JavaScript" type="text/javascript" src="main.js"></script>
</head>
<body onload="main()">
<canvas id="canvas" width="640" height="960"></canvas>
</body>
</html>
Try: