how to run html canvas AI game run as fullscreen

Question

this is the code I tried below I wanted to run this animation project full screen of the window. when run the project it not run as an full screen please any one help me to run this application as full window thanks

window.onload = init();

function init() {
 c = document.getElementById("canvas10");
 ctx = c.getContext("2d");
 ctx.fillStyle = "white";
 //ctx.rect(0,0,1366,768);
 // ctx.fill();

 // Coordinates and speed of player
 var x1 = 200 ; 
 var y1 = 420 ; 
 var SPEED = 4 ; 

 //tree creaion
  var x3 = 600;
  var y3 = 350;


  //mouse1 creations
  var x4 = 570;
  vr y4 = 500;
  var  SPEED1 = 1; 

  //mouse2 creations
  var x5 = 640;
  var y5 = 560;
  var SPEED2 = 1;

  //mouse3 creations
  var x6 = 700;
  var y6 = 580;
  var SPEED3 = 1;

  //mouse4 creations
  var x7 = 600;
  var y7 = 540;

   //roof creations
   var x8 = 130;
   var y8 = 500;

   //fence creations
   var x9 = 30;
   var y9 = 500;

   //leavies creations
   var x10 = 380;
   var y10 = 550;

   //bee creation
   var x11 = 680;
   var y11 = 350;

  // programming begins

  // commands
  stop = false;
  var textImage = new Image(); // make image object
  textImage.src = "text1.jpg";  // set the image path
  var textImage2 = new Image(); // make image object
  textImage2.src = "text2.jpg";  // set the image path
  agentCanFeel = false;
  agentCOLOR = "lightblue";

 // Handle keyboard controls
 var keyPress = {} ;   // initialize the list that stores key presses
 addEventListener ("keydown",   function (e)   {
    keyPress[e.keyCode] = true;    }   , false);
 addEventListener ("keyup",    function (e)  {
   delete keyPress[e.keyCode];  }  , false);

function Player(x1, y1)  {
    var playerImage = new Image(); // make image object
    playerImage.src = "tom.png";   // set the image path
    ctx.drawImage(playerImage, x1, y1, 80,70);
}


function Agent()   {
    ctx.beginPath();
    ctx.arc (x2,y2, 50, 0 , 2 * Math.PI, false);
    ctx.fillStyle = agentCOLOR;
    ctx.fill();
    var wingImage = new Image();
    wingImage.src = "wings.jpg";
    ctx.drawImage(wingImage, x2-40, y2-120 , 90 , 70);
}

//tree creation function
function tree()
{
  ctx.beginPath();
  ctx.fill(); 
  var tree = new Image();
  tree.src = "tree.png";
  ctx.drawImage(tree, x3- 60, y3- 120 , 250 , 230); 

}

//mouse creation function
function mouse()
{
  ctx.beginPath();
  ctx.fill(); 
  var mouse = new Image();
  mouse.src = "mouse.gif";
  ctx.drawImage(mouse, x4- 60, y4- 120 , 40 , 30);  
 }

function mouse2()
{
  ctx.beginPath();
  ctx.fill(); 
  var mouse1 = new Image();
  mouse1.src = "mouse.gif";
  ctx.drawImage(mouse1, x5- 60, y5- 120 ,  40 , 30);    
}

function mouse3()
{
  ctx.beginPath();
  ctx.fill(); 
  var mouse2 = new Image();
  mouse2.src = "mouse.gif";
  ctx.drawImage(mouse2, x6- 60, y6- 120 ,  40 , 30);    
}

function mouse4()
{
  ctx.beginPath();
  ctx.fill(); 
  var mouse4 = new Image();
  mouse4.src = "mouse.gif";
  ctx.drawImage(mouse4, x7- 60, y7- 120 ,  40 , 30);    
}

//cat roof creation function
function roof()
{
  ctx.beginPath();
  ctx.fill(); 
  var roof = new Image();
  roof.src = "roof.png";
  ctx.drawImage(roof, x8- 60, y8- 120 , 150 , 130); 
}

// fence behind  cat
function fence()
{
  ctx.beginPath();
  ctx.fill(); 
  var roof = new Image();
  roof.src = "fence.png";
  ctx.drawImage(roof, x9- 60, y9- 120 , 150 , 130); 
}

// leavies creation
function leaves()
{
  ctx.beginPath();
  ctx.fill(); 
  var roof = new Image();
  roof.src = "leaves.png";
  ctx.drawImage(roof, x10- 60, y10- 120 , 80 , 70); 
}


// bee creation
function bee()
{
  ctx.beginPath();
  ctx.fill(); 
  var bee = new Image();
  bee.src = "bee.gif";
  ctx.drawImage(bee, x11- 60, y11- 120 , 80 , 70);  
}

function clear() {
  ctx.rect(0,0,1000,600);
  ctx.fill();
}

//mouse programming
function updatemouse()
{
  x5 = x5 + SPEED1;

  if (x5>650)
     SPEED1 = SPEED1 * -1;

  if (x5<600)
     SPEED1 = SPEED1 * -1;
 }
 //end updateStuff

 function updatemouse1()
 {
   x6 = x6 + SPEED2;

   if (x6>800)
     SPEED2 = SPEED2 * -1;

   if (x6<600)
     SPEED2 = SPEED2 * -1;
 }
 //end updateStuff

 function updatemouse2()
 {
   x7 = x7 + SPEED3;

   if (x7>800)
     SPEED3 = SPEED3 * -1;

   if (x7<600)
     SPEED3 = SPEED3 * -1;
 }
 //end updateStuff

 if (stopok == true)
 {
    ctx.drawImage(textImage, 100, 250); //STOP COMMAND
    ctx.drawImage(textImage2,  x5, y5-50); // OK RESPONSE
 }//end if


function updateStuff() {
    if (37 in keyPress && x1>0) // left arrorw
         x1 =  x1 - SPEED;
    if (39 in keyPress && x1<1000)  // right arrow
        x1 = x1 + SPEED;
    if (38 in keyPress  &&  y1 > 20) // arrow up
        y1 = y1 - SPEED;
    if (50 in keyPress  &&  y1 < 500) // arrow down
        y1 = y1 + SPEED;

    if (agentCanFeel == true )  {
        agentCOLOR = "Red";
        x4 = x4 + 2;        
    }
    else 
    {
        agentCOLOR = "Lightblue";
        x4=x4 - 1;  
    }
 } //end updateStuff

 function drawStuff()   {
    Player(x1,y1);
    //   Agent();
    //  mouse();
    mouse2();
    mouse3();
    mouse4();
    roof();
    tree();
    fence();
    leaves();
    bee();
 } //end drawStuff

  function gameLoop() {
    clear();
    updateStuff();
    drawStuff();
    updatemouse();
    updatemouse1();
    updatemouse2();
    setTimeout(gameLoop, 20);  //call game loop every 20 mili sec 
  } //end gameloop

  gameLoop();  
}  //end init function