how to changes the background time in html canvas AI

Question

enter image description here this is a picture of AI gaming project.

My problem is this.in this project has two times.one is daytime and night time.

this project works successfully.but I need instead of changes color of daytime and night time change a picture. I have day time and night time picture how will I insert those I tried many ways but I couldn't please help someone to do this

window.onload = init();
    function init()
    {
    cs = document.getElementById("canvas3");
    ctx = cs.getContext("2d"); // set context as 2D
    ctx.rect(10,50,900,700);
    ctx.fill();
    // Coordinates and speed of player
    var x1 = 580;
    var y1 = 200;
    var SPEED = 5;
    // initialize visibility duration count
    var count = 0;
    //initialize time of day
    timeofday = "Day Time";
    hourcount = 0;
    // initialize enemy state
    EnemyCanSee = false;
    enemyCOLOR = "green";
    // Handle keyboard controls
    var keysDown = {};
    addEventListener("keydown", function (e){
        keysDown[e.keyCode] = true;
    }, false);
    addEventListener("keyup", function (e) {
        delete keysDown[e.keyCode];
    }, false);
    //create a player to control
    function player(x1, y1)
    {
        //ctx.fillStyle = "green";
        //ctx.fillRect(x1, y1, 40, 40);
        var demoImage = new Image();   // make image object
        demoImage.src = "player.jpg";  // set image path
        ctx.drawImage(demoImage, x1, y1, 40, 40); 
    }
    function drawObstacle()
    {
    var demoImage = new Image();   // make image object
    demoImage.src = "wall.jpg";  // set image path
    ctx.drawImage(demoImage, 500, 150, 50, 200);  
    }
    function drawEnemy()
    {
      ctx.beginPath();
      ctx.arc(100,230,50,0,2*Math.PI,false);
      ctx.fillStyle= enemyCOLOR;
      ctx.fill();
    }
    function drawDungeonDoor()
    {
    var demoImage = new Image();   // make image object
    demoImage.src = "door.jpg";  // set image path
    ctx.drawImage(demoImage, 300, 250, 50, 60);     
    }
    function clear()
    {  
      ctx.fillStyle = "rgb(255, 255, 255)";  
      ctx.beginPath();   
      ctx.rect(0, 0, 800, 500);  
      ctx.closePath();  
      ctx.fill();  
    }  
    function drawStuff()
    {
    if (timeofday == "Night Time")
    {
      ctx.fillStyle = "black";
      ctx.rect(10,50,900,700);
      ctx.fill();
     }
    player(x1,y1);
    drawObstacle();
    drawDungeonDoor();
    drawEnemy();
    ctx.fillStyle = "red";
    ctx.font = "20px Arial";
    ctx.fillText(timeofday, 100, 70);
    }
    function checkVisibility()
    {
      if ((y1<150)|| (y1>350)||(x1<500))
         EnemyCanSee = true;
         else
         EnemyCanSee = false;
    }
    function shootPlayer()
    {
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'yellow';
    ctx.moveTo(100,230);
    ctx.lineTo(x1,y1);
    ctx.stroke();
    var demoImage = new Image();   // make image object
    demoImage.src = "explode.jpg";  // set image path
    ctx.drawImage(demoImage, x1-50, y1-50, 160, 160);  
    }
    function updateStuff()
    {   
           if (hourcount>240) //12 hours scaled up to 1200
               timeofday = "Night Time";
            if (hourcount>480) //12 hours scaled up to 1200
               {
                 timeofday = "Day Time";
                 hourcount = 0;
               } 
        checkVisibility();
        // control the ninja using arrow keys
        if (38 in keysDown && y1>0)
        {   
            y1 = y1-SPEED;
        }
        if (40 in keysDown && y1<460)
        {   
            y1 = y1+SPEED;
        }
            if (37 in keysDown && x1>0)
        {   
            x1 = x1-SPEED;
        }
           if (39 in keysDown && x1<600)
        {   
            x1 = x1+SPEED;
        }
    if (EnemyCanSee == true && timeofday == "Day Time")
               {
                 enemyCOLOR = "red";
                 count = count + 1; 
            }
            else
               {
                 enemyCOLOR = "green";
             count = 0; 
               }
            if (count > 60)  //player was visible for few seconds
              {
                shootPlayer();
              } 

    }

    function GameLoop()
    {   clear(); 
        updateStuff();    
        drawStuff();  
            hourcount = hourcount+1;
        setTimeout(GameLoop, 1000 / 50);  
    }  
    GameLoop(); 
    }

Answer 1

if (timeofday == "Night Time")
{
  ctx.fillStyle = "black";
  ctx.rect(10,50,900,700);
  ctx.fill();
 }

there is no else condition for day time

you can also use image with condition using

var background = new Image();
background.src = "http://i.imgur.com/yf6d9SX.jpg";

background.onload = function(){
    ctx.drawImage(background,0,0);   
}