Moving Statements into Separate Files

JavaScript
1

I am working on a map in HTML/JavaScript. The basic layout of the code is like this:

<html>
    <head>
    </head>
    <body>
        <canvas id="mainCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>
        <script>
            var canvas = document.getElementById("mainCanvas");
            var context = canvas.getContext("2d");
            /* Draw Chesapeake Bay */
            ....
            /* Draw Tennessee */
            ....
            /* Draw ... So on */
            ....
            /* Draw Kentucky */
            context.fillStyle = "#00A800";
            context.fillRect(1,16,527,440);
            context.fillStyle = "#00A800";
            context.strokeStyle="#54FC54"; // Light Green, COLOR 10 in QB.
            context.fillStyle = "#00A800"; // Darker Green, COLOR 2 in QB.
            context.fill();
            context.stroke();
            context.moveTo(105,190);
            context.lineTo(150, 190);
            context.lineTo(150, 185);
            context.lineTo(276, 185); // 290, 185
            context.moveTo(276, 185);
            context.lineTo(301, 175);
            context.lineTo(305, 160);
            context.lineTo(310, 155);
            context.lineTo(305, 145);
            context.lineTo(300, 125);
            context.lineTo(290, 110);
            context.lineTo(275, 95); // 1
            context.lineTo(270, 95); // 1
            context.lineTo(260, 100); // 1
            context.lineTo(250, 100); // 1
            context.lineTo(240, 90); // 1
            context.lineTo(235, 85); // 1
            context.lineTo(230, 85); // 1
            context.lineTo(220, 90); // 1
            context.lineTo(220, 100); // 1
            context.lineTo(210, 105); // 1
            context.lineTo(205, 115); // 1
            context.lineTo(195, 125); // 1
            context.lineTo(170, 130); // 1
            context.lineTo(165, 135); // 1
            context.lineTo(130, 140); // 1
            context.lineTo(120, 150); // 1
            context.lineTo(120, 160); // 1
            context.lineTo(115, 165); // 1
            context.lineTo(105, 170); // 1
            context.lineTo(105, 190); // 1
            context.strokeStyle="#54FC54"; // Light Green, COLOR 10 in QB.
            context.stroke();
            /* End Kentucky */
        </script>
    </body>
</html>

Right now all of this is one big file, but that is a bit unwieldy. I want to move each area into a separate file, for example, take the code relevant to Kentucky and create a file called draw_kentucky.js. Ideally, I’d like this to be inside a function, so that at the end my code in the main file would look something more like:

<html>
<head>
</head>
<body>
<canvas id="mainCanvas" width="640" height="480" style="border:1px solid #000000;"></canvas>
        <script>
            var canvas = document.getElementById("mainCanvas");
            var context = canvas.getContext("2d");
            draw_kentucky();
            draw_tennessee();
            draw_chesapeake_bay();
        </script>
</body>
</html>

I tried doing this, but don’t seem to be doing it right. I created the draw_kentucky.js file with the relevant code and tried putting the code inside a function draw_kentucky() { } but that didn’t seem to work.

Help?

2

Maybe you just didn’t include it in your code example, but in order to run the function you’ll need something like
<script src="kentucky.js"></script>
in your page.

You should probably pass it a “where to draw it” parameter too, no?

1 Like
3

Yep, that should work as you describe.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<canvas id="mainCanvas" width="640" height="480" style="border:1px solid #000000;">
</canvas>
<script src="kentucky.js"></script>
<script>
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
draw_kentucky(context);
</script>
</body>
</html>

kentucky.js

function draw_kentucky(context) {
  context.fillStyle = "#00A800";
  // ...
  context.stroke();
}

Not related to this question but I feel that SVG is a better way to draw this map, especially if it’s not animated.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<svg width="640" height="480" style="border:1px solid #000000;">
  <path d="M105,190L150,190L150,185L276,185L301,175L305,160L310,155L305,145L300,125L290,110L275,95L270,95L260,100L250,100L240,90L235,85L230,85L220,90L220,100L210,105L205,115L195,125L170,130L165,135L130,140L120,150L120,160L115,165L105,170L105,190z" stroke="#54FC54" fill="#00A800" />
</svg>
<script>
// Nothing to see here
</script>
</body>
</html>
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.