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 (i.e. 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);
};
js/main.jsis incorrect. Did you get any error in the browser console?error. It is more likely showingFile not found.