Inline elements will execute sequentially, as is the case in your example. However, all your current code does is define a function. It does not execute that function.
In your case you utilized the body onload=
event to actually execute the draw() function. This is why you do not have a problem with the code, which seems to be the point of your initial question.
For this reason, it is typically recommended that you not place javascript in the head section unless absolutely necessary, and instead place it as close to closing body tag as possible.
With that said, in this case you define a function, but defining it and executing it are 2 different things. It is not a problem for you to define a function that you do not execute until the DOM is ready, and the DOM element(s) you want to work with are already rendered.
With that said, when you load external javascript files in the head section, it can cause the rendering of the page to block, and depending on the size and number of scripts you're loading that way, it's again advisable to place these at the end of the page. This will avoid the concerns you have in terms of the existence of DOM elements prior to execution of a function that attempts to manipulate those elements.
as well.
– Ringo Nov 30 '13 at 07:41