title: How can I create an easy way to create shapes in javascript?
body: <p>I edited my code to be less confusing and more organized but I am still running into the same problem: If I use dot notation with a function before declaring the '.fill' command, I get an error, here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Store canvas width in var 'width'
  var width = canvas.width;
  
  //Store canvas height in var 'height'
  var height = canvas.height;
  
  //Get the center X and Y positions
  var centerX = width / 2;
  var centerY = height / 2;
  
  //Test variable, to test what's working the 1 is in case it'd conflict with local variable radius used in the declared function
  var radius1 = 120;
  
  //Declare function to be stored into a variable
  function Circle(radius1)
  {
      //Return radius when the circle alone is called
      return radius1;
      
      //Create variables to be used throughout the function
      var x = 0;
      var y = 0;
      
      //Nested function to be called with dot notation
      function setPosition(x1, y1)
      {
          x = x1;
          y = y1;
      }
  }
  
  //Add the shape (currently only oriented for the circle, will be modified to be used with any shape)
  function add(obj)
  {
      //Set the radius equal to the object as the object is the Circle function
      var radius = obj;
      
      //Set var 'x' to the value in Circle's local variable 'x'
      var x = obj.x;
      
      //Set var 'y' to the value in Circle's local variable 'y'
      var y = obj.y;
      
      //Now get the element id of the canvas
      var c = document.getElementById("canvas");
      
      //Get the dimensional plane of the shape
      ctx = c.getContext("2d");
      
      //Begin drawing the shape
      ctx.beginPath();
      
      //Draw the circle based on previously declared variables
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      
      //Fill with desired color if method setColor was called otherwise automatically fill with black
      ctx.fill();
  }
  
  //Create the circle with desired radius.
  var circle = Circle(radius1);
  
  //Use dot notation to call setPosition
  circle.setPosition(centerX, centerY);
  
  //Call add, using object 'circle' as the value of function add's parameter
  add(circle);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Project&lt;/title&gt;
          &lt;canvas id="canvas" width="400" height="480" style="border:1px solid;"&gt;Your browser does not support the HTML canvas tag.&lt;/canvas&gt;
          &lt;script src="myScript.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>no matter what I do I get an error saying 'setPosition is not a function' and if I try using</p>
  <p><code>circle.setPosition.x = centerX;</code></p>
  <p>I get an error that says</p>
  <p><code>Uncaught TypeError: Cannot set property 'x' of undefined</code></p>