Improving the Code

We will begin refining the dot code in several steps..
External JavaScript files.
- It is possible to place JavaScript in a different file and import it.
  - Code highlighting works better (at least in vi)
  - It makes a cleaner html file.
    - if my code is in canvasTools.js
    - ```
    <script type="text/javascript" src="canvasTools.js"> </script>
    	       
```
- You can give a full path if you have the code in another directory.
- This can go in the header or body of the html document.
- I like it in the header,
- I define two external functions
  - MakeCanvas(width, height) creates a canvas an returns the context of this canvas.
  - RandomPattern(context) will draw a random pattern in the canvas context.
- So my final html file becomes
```
  <!DOCTYPE html>
  <html>
  <head>
     <script type="text/javascript" src="canvasTools.js"> </script>
  </head>
  <body>
  
  <h1> Random Dots</h1>
  <h3>Or a Very Bad Automated <a href="https://en.wikipedia.org/wiki/The_Starry_Night">van Gogh</a></h3>
  
  
  <script>
  var WIDTH = 300;
  var HEIGHT = 300;
  
  var ctx = MakeCanvas(WIDTH, HEIGHT);
  
  RandomPattern(ctx);
  </script>
  <p>
  <button type="button" id="Redraw" onclick="RandomPattern(ctx)">Redraw</button>
  
  </body>
  </html>
```
- Notice I call RandomPattern once in the body of the HTML document.
  - This performs the initial decoration of the canvas.
- Notice it is called, with the correct parameter in the declaration of the button as well.

The code

This information is all in canvasTools.js
This is the 130 way to do it.
This relies on a JSON or JavaScript Object Notation structure.
- This is just a first look at how to declare structures.
- And probably a very C++ style look as well.
  - In this case I am declaring a "struct" ref
  - It has three fields, width, height, and ctx
  - Later we will access these with dot notation
```
x = Math.random()*ref.width;
ref.ctx.fillRect(x, y, 2, 2);
// or even
ref.count = 0;
```
  - note that in the last line a new field is added and a value is assigned.
  - You can check to see if a variable is defined or not
```
if (ref.count==undefined) {
   ref.count = 0;
} else {
   ref.count++;
}

console.log("RandomPattern calld ", ref.count, "times ");
```
Javascript functions
- One of several ways to declare them.
- Parameters are just listed, no types given.
- A quick side trip on parameters.
  - If a variable like WIDTH or HEIGHT is passed, it is passed by value.
  - If an object like ref is passed, it is passed by reference.
  - See this page
- return is very much like c++
- So the function is
```
function MakeCanvas(width, height) {
    var canvas = document.createElement('canvas')
        canvas.height = height;
        canvas.width = width;

    document.body.appendChild(canvas);

    var ref={"width":width, "height":height, "ctx": canvas.getContext("2d")}
    return ref;
}
```
- Nice and wrapped up in a single struct.

No major changes in the RandomPattern function either.

function RandomPattern(canvasRef) {
    var i;
    var x,y;
    var r,g,b;
    var color;

    canvasRef.ctx.fillStyle="#cccccc";
    canvasRef.ctx.fillRect(0,0,canvasRef.width,canvasRef.height);

    for(i=0;i<100;i++) {
        r = Math.floor(Math.random()*255);
        g = Math.floor(Math.random()*255);
        b = Math.floor(Math.random()*255);

        color = "rgb("+r+","+g+","+b+")";
        canvasRef.ctx.fillStyle = color;

        x = Math.random()*canvasRef.width;
        y = Math.random()*canvasRef.height;
        canvasRef.ctx.fillRect(x, y, 2, 2);
    }
    return;
}

The final demo for this step.