Drawing Rectangle inside of function or .js file

Question

I started learning javascript after coding in java and c++ and I am trying to draw a rectangle. I can get a normal rectangle to draw If i just code normally in a script in the body but I wanna make my file look neat and have a function incase I need to call more rectangles in my program. I have googled around but I still can't figure out how to do this.

i have tried putting the function in the head section and my js file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PacMan</title>

    <script scr="pac.js"></script>

    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //function drawRect(ctx, startX, startY, width, height, color){

            //ctx.beginPath();
           // ctx.rect(startX,startY,width,height);
           // ctx.fillStyle = color;
           // ctx.closePath();

       // }

    </script>

</head>
<body>

<canvas id="canvas" width="1000" height="720"></canvas>

<script>

drawRect(ctx,10,10,10,10, "#FF0000");

    
    // this works but i can not get the function to work
    //var canvas = document.getElementById("canvas");
    //var ctx = canvas.getContext("2d");
        //ctx.beginPath();
       // ctx.rect(900, 10, 50, 50);
       // ctx.fillStyle = "#FF0000";
        //ctx.fill();
       // ctx.closePath();

</script>

</body>
</html>

here is the .js file i created to try to keep my functions in a nice neat order so they do not clutter my files

function drawRect(ctx,h1,h2,w1,w2, color){

     //i tired at one point putting this into function
    //var canvas = document.getElementById("myCanvas");
   // var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.rect(20, 40, 50, 50);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();


}

Roland Jegorov · Answer 1 · 2018-01-13T20:46:42.817

If I understood you correctly, you want to create a function that draws something and possibly be able to reuse that in other files?

Here's a working example to simulate a working function https://jsbin.com/puneseyuca/edit?html,js,output. You can also inspect the output area and check the DOM semantics.

There are a couple of things you should follow to make it work properly.

Put <script> just before </body>

<body>
    <!-- DOM -->
    // ...

    <!-- Scripts -->
    <script src="./path-to-your-js-file.js"></script>
</body>

Mostly you'll want to put your <script> files just before the ending body tag. Also, since you are not using any frameworks it would be good to be completely sure that the DOM is loaded, hence you could add this code:

document.addEventListener("DOMContentLoaded", function(event) {
    // "DOM fully loaded and parsed"
    // Insert your code here
});

This is important for the JS to be able to select elements from the DOM, otherwise they can be undefined.

Create a global variable, typically window.anything

⚠️ This should be avoided to avoid unexpected mutations and hence bugs

I do not endorse this approach, but that's how some libraries work by namespacing to the global window object. Otherwise, the variables set in 1 file are scoped to it i.e. cannot be accessed from outside.

So to do so you would declare a function and then save it to the global object i.e.
Inside e.g. duck.js
window.drawDuck = drawDuck

N.B. Be sure to check the order of your javascript files. A file declaring a global variable should come before the ones using it.

All said and done, I believe you can do what you intend to without global variables.

Hope I answered your question.

Happy Coding!

Drawing Rectangle inside of function or .js file

1 Answers1