admin管理员组

文章数量:1345179

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>

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>

  • javascript
  • html
Share Improve this question edited Nov 23, 2017 at 14:36 Muhammad Omer Aslam 23.8k9 gold badges46 silver badges69 bronze badges asked Nov 23, 2017 at 14:19 RidertvisRidertvis 2231 gold badge2 silver badges13 bronze badges 7
  • 1 Your script appears in the document before the <canvas> element, so when the script runs the canvas is not in the DOM. – Pointy Commented Nov 23, 2017 at 14:20
  • 2 also there's problem here : </canvas – Barbaros Özhan Commented Nov 23, 2017 at 14:22
  • 1 Possible duplicate of Where should JS scripts go in an HTML file? – user247702 Commented Nov 23, 2017 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 <script> tags in HTML markup? – user247702 Commented Nov 23, 2017 at 14:25
  • 2 How to approach such issues: Your error says that getElementById("can") returns null. According to MDN, 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 and find that your JavaScript must not run before the DOM or rather that specific element has been loaded. – le_m Commented Nov 23, 2017 at 14:26
 |  Show 2 more ments

3 Answers 3

Reset to default 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);

Okay there are two serious errors.

  1. You're trying to get the element before the DOM is fully loaded. Therefore the canvas note is not reachable. See addEventListener and DOMContentLoaded.
  2. 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>

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.

本文标签： javascriptcanvasgetContext(quot2dquot) not workingStack Overflow

版权声明：本文标题：javascript - canvas.getContext(&quot;2d&quot;); not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743783032a2538183.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。