html5 canvas from external js file not working
Question
Storing canvas js in external file is not working.
If the javascript that draws on the canvas is supplied in the html header, then the canvas draws the rectangle correctly.
Shown below is html that works (ie javascript in html header)
<!DOCTYPE html>
<html>
<head>
<script type="javascript/text" src="js/nodeServer.js"></script>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 100, 50);
};
</script>
</head>
<body>
<h1>Canvas</h1>
<canvas
id="myCanvas"
width="300"
height="400"
style="background-color:#efefef;"
></canvas>
</body>
</html>
However, when I transfer the js to an external file located at js/main.js, the rectangle does not get drawn, but I think the reference is good. I don't know what is wrong.
Here is the html without the javascript in the header.
<html>
<head>
<script type="javascript/text" src="js/nodeServer.js"></script>
</head>
<body>
<h1>Canvas</h1>
<canvas
id="myCanvas"
width="300"
height="400"
style="background-color:#efefef;"
></canvas>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is the main.js file
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
};
There are other relevant questions on stack, but the answers didn't solve my problem. What am I doing wrong? I was sure to put my js in a window.onload function, and I referenced the canvas script at the bottom of the body of the html.
Thanks for helping me.
... For more detailed information that may or may not be relevant, I am running the app with node. In the ubuntu terminal in the same directory as the html file,
node js/nodeServer.js
(You must have node installed to do this.)
Here are the contents of js/nodeServer.js file
const http = require("http");
const fs = require("fs");
fs.readFile("./index.html", function(err, html) {
if (err) {
throw err;
}
http
.createServer(function(request, response) {
response.writeHeader(200, { "Content-Type": "text/html" });
response.write(html);
response.end();
})
.listen(4242);
});
go to http://localhost:4242 in web browser like Chrome.
UPDATE: I noticed that when I open chrome developer tools and go to the 'sources' tab, that the js/main.js file contents are strangely showing my html code, not the js code. Below I'm giving the picture of the sources showing the index.html file and then a picture showing the main.js file. The html file does not have SyntaxError, but the main.js file is showing SyntaxError.
however, I double check to make sure that the main.js is javascript file on my os.
> cat js/main.js
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
};
1 answers
solution1
1 ACCPTED 2019-07-14 03:59:23
I would guess since you are using a node server, you dont need to include the line <script type="javascript/text" src="js/nodeServer.js"></script> in your html.
Also you need to serve the .js file via your http server, you only are serving html in the code sample.
Try using something like express https://expressjs.com/ to handle serving files to your application.
If you dont need a node server you could do this: https://codesandbox.io/s/sleepy-chaum-5c8dk
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.