Home/ Questions/Q 8707493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T03:53:01+00:00

An example of code, i want drawing an object using context. It throws an

  • 0

An example of code, i want drawing an object using context.

It throws an error on Firefox 15:

TypeError: el is null
[Break On This Error]

GetElementById has been properly grabbed, but it thrown an error. I’m also checking head, script tags and it’s properly. I’m also put script code in head tag and result is same.

This is example of code:

<!doctype html>
<html lang="en">
    <head>
        <title>Canvas</title>
        <meta charset="utf-8">  
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    </head>
    <body>
        <script>
            var el = document.getElementById("myCanvas"); // this thrown empty

            var context = el.getContext("2d");

            context.fillStyle = '#00f';
            context.strokeStyle = '#f00';
            context.lineWidth = 4;

            context.beginPath();
            context.moveTo(10, 10);
            context.lineTo(100, 10);
            context.lineTo(10, 100);
            context.lineTo(10, 10);
            context.fill();
            context.stroke();
            context.closePath(); 
        </script>
        <canvas id="myCanvas" width="600" height="200"></canvas>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your canvas element appears after the <script> block. When the script code runs, it (the <canvas>) is not yet in the DOM, so getElementById() won’t find it.

    Put the <canvas> before the script and try it again.

    The DOM is built incrementally as the page is parsed. Script blocks, however, are evaluated as soon as the </script> closing tag is found. Thus when your script is executed the <canvas> has not yet been interpreted by the browser at all.

    • 0