Search code examples
javascripthtmlhtml5-canvasexternal-js

html5 canvas from external js file not working

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>

enter image description here

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.

enter image description here

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);
};
Solution

  • 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