Going Towards Objects

Our ultimate goal for this step is here

The next step should take us through 230.
Build a canvas object.
Two minor additions to js code.
- this
  - Is a pointer to the current object.
  - But we are using MyCanvas as a constructor
  - So it is a pointer to the instance we are creating.
```
function MyCanvas(width, height) {
     
    // Canvas Creation CODE DELETED.

    // save some info as local values
    this.width = width;
    this.height = height;
    this.ctx =  canvas.getContext("2d");
    this.dotSize = 1;
    this.dotCount = 100;

    return this;
}
```
- .prototype
  - Every object has a sub object called prototype
  - This is inherited from the default object or the object this object was constructed from.
  - We will add functions to this list.
  - I want to add Three member functions to my code.
    - ChangeDot will allow me to change the dot size.
    - ChangeCount will allow me to change the size of each dot.
    - Redraw will allow me to redraw the canvas.
```
MyCanvas.prototype = {
    ChangeDot:   function(sizeID) {
        // code goes here.
    },

    ChangeCount: function(countID) {
        // code goes here.
    },

    Redraw() {
         // code goes here.
    }
};
```
- The Changing functions.
  - These need to be tied into the HTML code.
  - In each case, I will use a text input field for this data.
  - I want to write a function which I can pass the ID of the field into the function and get the value of the box.
  - The HTML code to declare one of these boxes is
```
Dot size:
<input
      type="text" 
      name="Dot Size"
      maxLength = "3"
      size = "3"
      id="DotSize", onchange="canvas1.ChangeDot('DotSize')">
```
  - Note: canvas1 is an instance of the canvas that I will declare later.
  - Note: My code will not depend on the ID, but the element with the ID I pass in better be a text box.
  - My JavaScript function:
```
    ChangeDot:   function(sizeID) {
        var sizeNode  = document.getElementById(sizeID);
        var size = parseInt(sizeNode.value);

        if (size > 0 ) {
            this.dotSize = size;
            this.Redraw();
        }
    },
```
  - Notice, the first line, I ask the document for the text box with the given ID.
  - In the second line, I attempt to get the value.
  - The if statement might be modified further to provide more protections (NAN, letters, ...), I don't know, I didn't test them very well.
  - Note the call to this.Redraw()
    - I like the thing to change when I type in the new value.
    - But if you left this line out, your code could wait for another event to process changes.
    - More on events later.
  - ChangeCount is the same thing.
- Redraw then is changed to make reference to this.varname
The final version, along with code is here.