Html 5 canvas getElementById() returns null/undefined
19,917
Solution 1
The DOM has already been loaded when the draw
-function is called, that is correct.
But the var canvas = document.getElementById('control');
-line is evaluated before that, because it is not in the draw
-function. It is executed immediately in the <head>
of the document BEFORE the elements have been rendered.
I would suggest you change your init function to something like that
var canvas,context;
function initializeMap() {
canvas = document.getElementById('control');
context = canvas.getContext('2d');
}
Solution 2
If your javascript
is loaded prior to your body
then canvas will be undefined
because the browser hasn't loaded/rendered it yet.
Author by
Bahamut
Updated on June 27, 2022Comments
-
Bahamut almost 2 years
here's the code:
HTML:
<body onload="initializeMap()"> <div id="map_canvas" style="width:100%; height:100%; z-index:1"></div> <canvas id="control" style="width:100%; height:100%; z-index:2">Does Not Support Canvas Element</canvas> </body>
Javascript:
<script type="text/javascript"> var canvas = document.getElementById('control'); var context = canvas.getContext('2d'); function draw(){ context.font = "bold 12px sans-serif"; context.fillText("x", 248, 43); } </script>
the draw function is called after initialization of the google map so the DOM should have already loaded by then, correct? What might have I done incorrectly?