Html5 canvas and javascript document.getElementById() returns null

Question

I'm trying to use html5 canvas and when I do

    var c=document.getElementById('myCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

and here is the html

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="game.js"></script>
    </head>
    <body>
    <canvas id="myCanvas" width="512" height="480" style="border:1px solid #000000;">
    </canvas>
    </body>
    </html>

I have no clue what's wrong

canvas hasn't loaded till the time you make the first call. try calling it on window load or document ready — Amitd, Mar 15 '13 at 19:17
@FelixKling That's a great post (good work!), wasn't aware of it, defiantly bookmark for later. — Benjamin Gruenbaum, Mar 15 '13 at 19:30

score 6 · Accepted Answer · answered Mar 15 '13 at 19:15

Chances are your script is run before your DOM is ready and window has loaded, try for instance:

window.onLoad=function(){
    var c=document.getElementById('myCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
};

score 1 · Answer 2 · answered Mar 15 '13 at 19:49

1

Try to insert your script before the closing body tag.

Like:

...
    <script src="game.js"></script>
</body>
...

answered Mar 15 '13 at 19:49

Mohammad Areeb Siddiqui

9,795
14
71
113

XiM · Answer 3 · 2013-03-15T19:27:03.063

0

May you try to get it before DOM was loaded? Try to call your code inside this block:

window.onload = function() {
    var c=document.getElementById('myCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
};

edited Mar 15 '13 at 19:27

answered Mar 15 '13 at 19:18

XiM

396
3
15

1

You posted a similar answer to the one I did, only ~ 3 minutes later. What advantage do you think your answer has over mine that you chose to add it? – Benjamin Gruenbaum Mar 15 '13 at 19:20
sorry, didn't see that your have already posted correct answer... – XiM Mar 15 '13 at 19:23

score 0 · Answer 4 · answered Mar 15 '13 at 19:27

0

If you want to access DOM Element through javascript, make sure your java script code should triggered after DOM is loaded, use document.onload or window.onload callbacks to trigger your javascript code..

Enjoy Coding..

answered Mar 15 '13 at 19:27

Scarecrow

4,057
3
30
56

Html5 canvas and javascript document.getElementById() returns null

4 Answers4

Linked

Related