Canvas works in HTML file, but not javascript file

Question

I just finished my first JavaScript book, "Head First HTML5", and I'm feeling quite dumb. If i put the script in the HTML file it works, but doesn't work in a separate JavaScript file.

HTML file:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="canArt.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas> 
</body>
</head>

JS file:

window.onload = init();
function init() {  
 var canvas = document.getElementById("canvas");  
 var ctx = canvas.getContext("2d");  

 ctx.fillStyle = "rgb(200,0,0)";  
 ctx.fillRect (10, 10, 55, 50);  

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
 ctx.fillRect (30, 30, 55, 50);  
}

please help.

Alex · Accepted Answer · 2012-01-09 02:44:43Z

3

Your immediately executing the init function by including the parens and assigning the result of init, which is nothing, to the onload handler...

change:

window.onload = init();

to:

window.onload = init;

http://jsfiddle.net/sFmNw/

edited Jan 9, 2012 at 2:44

answered Jan 9, 2012 at 2:37

Alex

35.5k5 gold badges81 silver badges94 bronze badges

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

1 Comment

Marc B Over a year ago

In other words, saying = init(); executes the init function immediately and assigns its return value to window.onload, while saying = init; assigns the function itself as the onload handler.

Collectives™ on Stack Overflow

Canvas works in HTML file, but not javascript file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related