canvas.getContext("2d") does not work

Question

this is my code:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            (function drawCanvas(){
                var canv = document.getElementById('testcanvas1');

                if(canv.getContext){
                    alert("test");
                    var context = doof.getContext('2d');

                    context.fillStyle = "rgb(255, 0, 255)";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                }
            })();
        </script>
    </head>
    <body>
        <canvas id="testcanvas1"></canvas>
    </body>
</html>

There is no alert, so I assume the Variable canv.getContext is false. Why? In general .getContext('2d') does not work for my firefox 34. How can I make this funktion work?

`canv` is `null` because `#testcanvas1` hasn't been loaded yet. Therefore, `canv.getContext` throws an error. — Oriol, Dec 18 '14 at 19:02

score 0 · Accepted Answer · answered Dec 18 '14 at 18:59

You're executing your code before the document is loaded. Solution:

window.onload = function() {
    (function drawCanvas(){
        var canv = document.getElementById('testcanvas1');

        if(canv.getContext){
            alert("test");
            var context = doof.getContext('2d');

            context.fillStyle = "rgb(255, 0, 255)";
            context.fillRect(0, 0, canvas.width, canvas.height);
        }
    })();
}

canvas.getContext("2d") does not work

1 Answers1