I am trying to make a point and click adventure game in HTML Canvas for Games for Change.
I wanted to make my background images responsive/change resolution to the canvas size so I got some code from this link: Simulation background-size: cover in canvas.
I have multiple images for backgrounds of different scenes. So I put them all inside an array. However, I have this error where it says "Image is not defined" for the function call.
How do I call 1 of those background images to display on the canvas with the user1693593's function call?
I am going to take this call to make a scene with buttons and text.
CSS:
#gameCanvas {
width: 960px;
height: 640px;
border: 5px solid rgba(52,52,52,1.00);
background-color: rgba(241,213,179,1.00);
}
JS
/**Array of Images**/
var imgArray = {
image00: 'gameImages/titleScreen.png',
image01: 'gameImages/titleScreen1.png',
image02: 'gameImages/titleScreenBW.png',
image03: 'gameImages/startScreen.png',
image04: 'gameImages/startScreenBW.png',
image05: 'gameImages/forestTrail.png',
image06: 'gameImages/forestTrailBW.png',
image07: 'gameImages/jewleryOnLog.png',
image08: 'gameImages/jewleryOnLogBW.png',
image09: 'gameImages/sunlitWaterFall.png',
image10: 'gameImages/sunlitWaterFalBW.png',
image11: 'gameImages/sunlitWaterFall.png',
image12: 'gameImages/sunsetStarySky.png',
image13: 'gameImages/sunsetStarySkyBW.pn',
image14: 'gameImages/campSunset.png',
image15: 'gameImages/campSunsetBW.png',
image16: 'gameImages/LoveHeart.png',
image17: 'gameImages/LoveHeartBW.png',
image18: 'gameImages/nightSky2BW.png',
image19: 'gameImages/nightSky2.png',
image20: 'gameImages/nightSkyAnimate.gif'
};
drawImageProp(ctx, image, 0, 0, width, height);
Update on Array Edit
/**Array of Images**/
var imgArray = [
"gameImages/titleScreen.png",
"gameImages/titleScreen1.png",
"gameImages/titleScreenBW.png",
"gameImages/startScreen.png",
"gameImages/startScreenBW.png",
"gameImages/forestTrail.png",
"gameImages/forestTrailBW.png",
"gameImages/jewleryOnLog.png",
"gameImages/jewleryOnLogBW.png",
"gameImages/sunlitWaterFall.png",
"gameImages/sunlitWaterFalBW.png",
"gameImages/sunlitWaterFall.png",
"gameImages/sunsetStarySky.png",
"gameImages/sunsetStarySkyBW.pn",
"gameImages/campSunset.png",
"gameImages/campSunsetBW.png",
"gameImages/LoveHeart.png",
"gameImages/LoveHeartBW.png",
"gameImages/nightSky2BW.png",
"gameImages/nightSky2.png",
"gameImages/nightSkyAnimate.gif"
];