There is something with my code and I do not know what


#1

Can you help me? The image of the cat is not showing on the canvas. I don't know what is wrongs with my code.

Html:

<html>
<head>
    <link type="text/stylesheet" rel="stylesheet" href="style.css" />
    
</head>
<body>
    <center>
        <h1>Little Cat</h1>
        <canvas id="main" height="300" width="300"></canvas>
    </center>
    <script type="text/javascript" rel="javascript" src="script.js">Try another browser</script>
</body>
</html>

Javascript:

var canvas = document.getElementById('main'),
ctx = canvas.getContext('2d');


var catI = new Image();
    catI.src = "Image/cat.gif";



function Cat(x, y){
    this.x = x || 20, this.y = y || 50, this.img = catI, this.speed = 3,     this.keyInput = {};

this.display = function(){
    
    //control movements
    if(this.keyInput[38] === true){
        this.y -= this.speed;
    }
    if(this.keyInput[40] === true){
        this.y += this.speed;
    }
    if(this.keyInput[37] === true){
        this.x -= this.speed;
    }
    if(this.keyInput[39] === true){
        this.x += this.speed;
    }
    else{
        this.x += 0;
        this.y += 0;
    }
    
    //stay within the canvas
    if(this.x < 0){
        this.x = 0;
    }
    if(this.x >  canvas.width - 50){
        this.x = canvas.width - 50;
    }
    if(this.y < 0){
        this.y = 0;
    }
    if(this.y >  canvas.height - 50){
        this.y = canvas.height - 50;
    }
    
    ctx.drawImage(catI, this.x, this.y);
};

}

var cat = new Cat(50, 50);

document.addEventListener("keydown", function(e){
    cat.keyInput[e.keyCode] = true;
});

document.addEventListener("keyup", function(e){
    cat.keyInput[e.keyCode] = false;
});

function animate(){
    cat.display();
}


window.requestAnimationFrame(animate);

#2

Hi @codecoder49931,

I have made a JSFiddle for your issue. It would be great if you could link, in it, to a cat image that is accessible on the Internet ("Image/cat.gif" points in your local computer)

Thanks!