html - Why does a specific method have to be located at a specific location inside of JavaScript and cannot be moved around? -


my question why drawscreen have located , cannot moved outside of method. method inside method. think still weak on javascript because there seems times when method, one, should able moved outside of long can called point inside of script.

question: why drawscreen() method have located in code?

code here:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>chapter 1 example 6 canvas sub dom example </title> <script src="modernizr.js"></script> <script type="text/javascript">  window.addeventlistener("load", eventwindowloaded, false);    var debugger = function () { }; debugger.log = function (message) {     try {         console.log(message);     } catch (exception) {         return;     } }   function eventwindowloaded () {     canvasapp(); }  function canvassupport () {     return modernizr.canvas; }    function canvasapp () {          if (!canvassupport()) {              return;         }          var thecanvas = document.getelementbyid("canvasone");         var context = thecanvas.getcontext("2d");           debugger.log("drawing canvas");           **function drawscreen() {             //background             context.fillstyle = "#ffffaa";             context.fillrect(0, 0, 500, 300);              //text             context.fillstyle    = "#000000";             context.font         = "20px sans-serif";             context.textbaseline = "top";             context.filltext  ("hello world!", 195, 80 );              //image             var helloworldimage = new image();              helloworldimage.onload = function () {                 context.drawimage(helloworldimage, 155, 110);             }             helloworldimage.src = "helloworld.gif";             //box              context.strokestyle = "#000000";              context.strokerect(5,  5, 490, 290);          }**          drawscreen(); }   </script>  </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasone" width="500" height="300">  <div>a yellow background image , text on top      <ol>         <li>the text says "hello world"</li>         <li>the image of planet earth.</li>         </ol>    </div> </canvas> </div> </body> </html> 

javascript has lexical scope, inherits scope of outer functions (scope dependant on functions located in source code).

in order move out, you'd need either pass data needs (context) or make available via other means.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -