"var canvas = document.getElementById("canvas")" can't be a global variable?

Question

I made the following script. When I push the button, the word "blood" moves, and push the button and it stops.

This script worked in Chrome but when I move the following scripts to the TOP line. (between var flag; and window.setInterval), an error happens saying

uncaught typeerror cannot call method 'getcontext' of null"

would you explain why it happens please?

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");

var y = 100;
var flag = false;

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


ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "red";
ctx.font = "50px Helvetica";
ctx.fillText("blood", 200, y);

if(flag){
y++;
}

}, 30);

function start(){
flag = true;
}

function stop(){
flag = false;
}

You're looking for the `DOMContentLoaded` event - I know this same issue comes up for many people on SO, so I'm looking for another answer that explains it, but failing so far... — Katana314, Apr 23 '14 at 19:13
Because if you move that line out of the `onload` function, then you are trying to access the element *before* it exists in the DOM. — gen_Eric, Apr 23 '14 at 19:14
Rocket Hazmat, I understood it well! Thank you for your help. — user3565953, Apr 23 '14 at 19:25

Cameron Tinker · Answer 1 · 2014-04-23T19:30:32.353

If you run your code in a script element at the end of the html body, you can ensure that it doesn't try to get the canvas context before the DOM is ready. Also, I made an optimization to your code to cache the DOM lookup:

<html>
<head>
    <title>Canvas Scrolling Text</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var y = 100;
        var flag = false;

        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d");

        setInterval(function() {
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = "red";
            ctx.font = "50px Helvetica";
            ctx.fillText("blood", 100, y);

            if(flag)
                y++;
        }, 30);

        function start()
        {
            flag = true;
        }

        function stop()
        {
            flag = false;
        }

        start();
    </script>
</body>

Here's a working jsFiddle.

Hi I'm sorry for late reply. I understand why it didn't work. Thank you for your kindness. — user3565953, Apr 27 '14 at 01:58

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

If you move it out of the onload function, then the DOM elements (specifically your canvas) don't exist yet. See https://stackoverflow.com/a/15564394/1370556 for more information on DOM content loaded events.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 23 '14 at 19:24

lebolo

2,120
4
29
44

Thank you for the link. I didn't understand well but from now on, I won't make the same mistake. Thank you! – user3565953 Apr 27 '14 at 01:59

"var canvas = document.getElementById("canvas")" can't be a global variable?

2 Answers2