Javascript only working within functions that are called

Question

Why does this code here successfully draw a green rectangle on html5 canvas,

<script type="text/javascript">
       function getStart(){
       var canvas = document.getElementById('canvas');

       if (!canvas) {
            alert('Error: Cannot find the canvas element!');
            return;
       }

       if (!canvas.getContext) {
            alert('Error: Canvas context does not exist!');
            return;
       }

       var ctx = canvas.getContext('2d');

       ctx.fillStyle = "#3d3";
       ctx.fillRect(0, 0, 100, 100);
}

getStart();


</script>

while this code does not...

<script type="text/javascript">           

       var canvas = document.getElementById('canvas');

       if (!canvas) {
            alert('Error: Cannot find the canvas element!');
            return;
       }

       if (!canvas.getContext) {
            alert('Error: Canvas context does not exist!');
            return;
       }

       var ctx = canvas.getContext('2d');

       ctx.fillStyle = "#3d3";
       ctx.fillRect(0, 0, 100, 100);

</script>

In the first the code is contained within a function which is called at the bottom of the script, but I don't see why this should make a difference.

Is the script at the bottom of the body (or at least after the related elements) in both cases ? — Denys Séguret
– Denys Séguret, Commented Nov 8, 2013 at 9:59
Here's the thing. Your code does work. jsfiddle.net/ericjbasti/dGHT6 but in your case its probably firing before <canvas id="canvas"></canvas> is actually rendered in the page. — ericjbasti
– ericjbasti, Commented Nov 8, 2013 at 17:13

Mykola Borysyuk · Accepted Answer · 2013-11-08 10:05:25Z

2

Are the second script runs in body section and after canvas tag?

javascript cant use the tag until it will be loaded in the DOM, so you have to put your script section after the tag

edited Nov 8, 2013 at 10:05

answered Nov 8, 2013 at 9:59

Mykola Borysyuk

3,4211 gold badge22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denys Séguret · Accepted Answer · 2013-11-08 10:08:58Z

1

If your code isn't in a function, the return statement can't work because it has nothint to return from. They generate an error

Uncaught SyntaxError: Illegal return statement

or

SyntaxError: return not in function

(depending on the browser)

edited Nov 8, 2013 at 10:08

answered Nov 8, 2013 at 9:56

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

1 Comment

Butt4cak3 Over a year ago

He's not calling the function in the bottom of the body, but right after the function declaration.

Aquatic · Accepted Answer · 2013-11-08 10:10:40Z

0

Internet Explorer does allow to reffer the HTML elements by their IDs. If you have an html element with id="canvas" on the page IE will have a global variable "canvas" which points to that html element. That can be a reason of the problem

In first case you have defined variable inside of a function, so it doesn't conflict with global one. In second case the variable is global, so both your variable and browser created one shares the same name, which can lead to problems.

All above is specific for Internet Explorer, must not cause any problems in other browsers.

answered Nov 8, 2013 at 10:10

Aquatic

5,1903 gold badges26 silver badges28 bronze badges

Collectives™ on Stack Overflow

Javascript only working within functions that are called

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related