Help me with html5 canvas image loading

[lopesam]

I am pretty new to the HTML5 canvas in fact this is my first game I am making (It's a game that takes place on a soccer field and you are able to move around as a soccer player). The field will draw but the player won't draw onto the screen and I am not sure why, also it doesn't return an error in the console. Perhaps it is something to do with the namespace? I have no clue.

If it matters I have win7 64 bit, and chrome.

HTML5 MASTERS PLEASE HELP ME!

code is here: http://pastebin.com/uUm8w265

stackoverflow: https://stackoverflow.com/questions/24727177/html5-canvas-wont-draw-my-image-to-the-screen-without-an-error

 

[Sawamara]

At a glance, this seems like the usual image problem, where you are indeed setting the image's source sooner than it could load, thus giving you problems.

Usually, you first set the image.

var picture = new Image();

 

Then you do an onload, specifying that your assets should be used only when loaded

picture.onload = (code that deals with that, either flipping a switch or something else)

Then you add the source.
picture.src = "imagesrc.png";

Now, you gotta make sure to wait for the image to load before you make any references to this in your regular draws. If you omit to do that, the image will not pop up at all. Or does so only after reloads.