HTML5 Canvas not working in external JavaScript file

Question

I have written this code in JavaScript and works perfectly fine when I include it on my index.html page:

<canvas id="bannerCanvas" width="960" height="200">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

   var canvas = document.getElementById("bannerCanvas");
   var context = canvas.getContext("2d");
     context.beginPath();
     context.moveTo(25,25);
     context.lineTo(355,55);
     context.lineTo(355,125);
     context.lineTo(25,125);
     context.moveTo(465,25);
     context.fill();
};  
</script>

...however when I place it in an external JavaScript file, it won't work! In the head of the index page, I have declared this:

 <script type="text/javascript" src="JavaScript/functionality.js">
 </script>

And I save this functionality.js file in the JavaScript directory, I've tried doing other JS functions in this file to check the index page and the JS are connected and they are...The answer is probably staring me in the face but for some reason I cannot see it!

Any help is much appreciated, thank you.

EDIT: I've been using Firebug and it is giving me no errors, when I use the code on the index page, I am seeing the shape I want yet when using the external JS file I am just seeing a big black rectangle.

user1488696 · Accepted Answer · 2012-07-05 17:47:30Z

18

the reason for this is that the script is being run before the canvas element is rendered.

To fix it, add this in your external file.

document.addEventListener('DOMContentLoaded',domloaded,false);
function domloaded(){
    // your code here.
}

or with jquery

$(function(){
    // your code here.    
});

answered Jul 5, 2012 at 17:47

user1488696

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

1 Comment

Tim Johnstone Over a year ago

Thank you :) thats the ticket! It seems to be working now and I have placed the script type declaration at the bottom of the page. Thanks to all who have helped!!

S M · Accepted Answer · 2012-07-05 17:43:08Z

4

Within functionality.js, try wrapping your code in

window.onload = function() {
// code here
}

so that it won't execute until after the page has loaded.

answered Jul 5, 2012 at 17:43

S M

8,1653 gold badges37 silver badges36 bronze badges

1 Comment

Tim Johnstone Over a year ago

Thank you for your comment, I tried doing exactly that but to no avail :(

epascarello · Accepted Answer · 2012-07-05 17:41:26Z

2

If it is in the head, you are loading it before the canvas element is rendered. Look at the JavaScript console and you will see a Null or undefined error.

Add the script tag in the same place it works with the inline code. JavaScript does not have to live in the head and some developers will recommend it should always be the last thing in the body.

Other solution is to run the script on document ready or window onload.

answered Jul 5, 2012 at 17:41

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

Tim Johnstone Over a year ago

Thank you for your reply, what I am wanting to do is use the external JS file, i've used external files before and no problems have occurred, it's really frustrating.

epascarello Over a year ago

Move the external file exactly where the original code was, it will work.

Nhu Trinh · Accepted Answer · 2012-07-05 17:42:11Z

2

Dont put in the head, When you put the code in the head, it run the code when there is no canvas element in page yet.

answered Jul 5, 2012 at 17:42

Nhu Trinh

14k6 gold badges65 silver badges88 bronze badges

2 Comments

Tim Johnstone Over a year ago

Thanks for your comment, the code is within the <body> tags when on the index.html page and works fine, its just when i'm trying to link the JS file in the head, it doesn't want to work...

Nhu Trinh Over a year ago

Just put the <script .... before </html> it ensure things run when page is loaded, or you can put your code in onload event window.onload=function(){start thing here}

Collectives™ on Stack Overflow

HTML5 Canvas not working in external JavaScript file

4 Answers 4

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related