canvas.getContext("2d"); not working

Question

I am getting the following Error

Error: Uncaught TypeError: Cannot read property 'innerHTML' of null at script.js:1

I have tried everything I could think of but nothing works.

var canvas = document.getElementById("can").innerHTML;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas  -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas
</body>
</html>

Possible duplicate of [Where should JS scripts go in an HTML file?](https://stackoverflow.com/questions/5220313/where-should-js-scripts-go-in-an-html-file) — user247702, Nov 23 '17 at 14:23
Another possible duplicate containing useful info (although the first one I linked might be easier for OP to understand): [Where should I put — user247702, Nov 23 '17 at 14:25
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Nov 23 '17 at 14:26
How to approach such issues: Your error says that `getElementById("can")` returns `null`. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById), this indicates that "element with the specified ID is not in the document" at the time that method was called. You will then be able to [search on stackoverflow for that specific issue](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) and find that your JavaScript must not run before the DOM or rather that specific element has been loaded. — le_m, Nov 23 '17 at 14:26

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

1. Script error when using canvas

Use var canvas = document.getElementById("can");

Not var canvas = document.getElementById("can").innerHTML();

See W3C - Canvas

2. Add an event listener when the document is ready, then execute your script

See W3C - DOM Event Listener example

function doSomething() {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext('2d');
    /*
    another scripts...
    */
}

window.addEventListener('onload', doSomething, false);

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 23 '17 at 14:23

Tony Chou

584
1
9
26

Why downvote? Is my answer to short? I just write the answer where he makes mistake – Tony Chou Nov 23 '17 at 14:34

Werner · Accepted Answer · 2017-11-23T14:41:25.317

Okay there are two serious errors.

You're trying to get the element before the DOM is fully loaded. Therefore the canvas note is not reachable. See addEventListener and DOMContentLoaded.
Remove .innerHTML. getContext appends on the node not on the content.

document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, 300, 200);
});

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas  -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas>
</body>
</html>

score 2 · Answer 3 · answered Nov 23 '17 at 14:27

There are two things.
First, you don't need .innerHTML as other answers stated.
Second, you either have to run you script at the window load event like so:

window.addEventListener('load', function () {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = ("green");
    ctx.fillRect(0, 0, 300, 200);
});

Or you should load the javascript after the canvas tag.

canvas.getContext("2d"); not working

3 Answers3

1. Script error when using canvas

2. Add an event listener when the document is ready, then execute your script

Linked