Why isn't my image being drawn on HTML5 canvas?
<p>I'm following the tutorials and setting up my code.. but when I run it I can an error message </p>

<p>"(index):18 Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state."</p>

<p>This is my code which Im running in the indexSoccer.html file, </p>

<pre><code>    var ctx = document.getElementById("ctx").getContext("2d");

    var Img = {};
    Img.player = new Image();
    Img.player.src = 'images/cat1sprite.png';

    drawPlayer = function(player){
        ctx.save();
        var x = player.x;
        var y = player.y;
        ctx.drawImage(Img.player, x, y);
        ctx.restore();

    }
</code></pre>

<p>and my directory looks like the following - </p>

<p><a href="https://i.stack.imgur.com/QZvZg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZvZg.png" alt="enter image description here"></a></p>

<p>any ideas why?</p>