0

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"
];

0 Answers0