How to fix Failed to load resource: net::ERR_FILE_NOT_FOUND 11[object%20Object]:1 error?

Question

JavaScript

the code:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');


const fon = new Image();
fon.src = "img/fon.jpg"

let image = new Image();

image.onload = draw;


let khight = [
  'img/1.png', 
  'img/2.png', 
  'img/3.png', 
  'img/4.png', 
  'img/5.png',
  'img/6.png', 
  'img/7.png', 
  'img/8.png', 
  'img/9.png', 
  'img/10.png',
  'img/11.png', 
  'img/12.png', 
  'img/13.png', 
  'img/14.png', 
  'img/15.png'   
]

khight[0] = {x : 0, y : 0};
let speed = 50;

function key(e){
    if(e.keyCode == 32){
        khight[0].x+=15;
    }
}

let x = 0;

window.addEventListener("keydown", key)

let time_curent = 0;

setInterval(() => {
    time_curent = (time_curent + 1) % khight.length
    image.src = khight[time_curent];
}, speed);


function draw() {
  ctx.drawImage(fon, 0, 0);
  
  for(let i = 0; i < khight.length; i++){
  ctx.drawImage(image, khight[i].x, khight[i].y, 198, 185);
  }
}

Answer 1

let khight = [
  'img/1.png', 
  'img/2.png', 
  'img/3.png', 
  'img/4.png', 
  'img/5.png',
  'img/6.png', 
  'img/7.png', 
  'img/8.png', 
  'img/9.png', 
  'img/10.png',
  'img/11.png', 
  'img/12.png', 
  'img/13.png', 
  'img/14.png', 
  'img/15.png'   
]

khight[0] = {x : 0, y : 0};

and what did you mean by that? first you declare an array of strings, then you make the first element an object, and it ends up in image.src