0

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:

//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);
<!DOCTYPE html>
<html>
    <head>
        <title>Project</title>
        <canvas id="canvas" width="400" height="480" style="border:1px solid;">Your browser does not support the HTML canvas tag.</canvas>
        <script src="myScript.js"></script>
    </head>

    <body>
        
    </body>
</html>

no matter what I do I get an error saying 'setPosition is not a function' and if I try using

circle.setPosition.x = centerX;

I get an error that says

Uncaught TypeError: Cannot set property 'x' of undefined

Shadow
  • 21
  • 1
  • 7
  • You're using the same variable `obj` for the function parameter and the canvas context. This is very confusing. – Barmar Sep 02 '21 at 17:56
  • What do you mean by "a class is being called before the .fill()`? – Barmar Sep 02 '21 at 17:57
  • @Barmar That's because I am trying to use the object class Circle is being stored into so before changing it I am setting the variables, it is there a second time to ensure it knows this is for the object stored in the parameter. now that I say this I see that this was pointless because I am changing what's stored in the object var anyways. – Shadow Sep 02 '21 at 18:02
  • And what I mean is I am using .fill() to fill the circle with a color (the default is black) and it won't draw the circle if a class is called before I call the .fill() command. – Shadow Sep 02 '21 at 18:04
  • Nothing about the Circle class can possibly affect how `obj.fill()` works. – Barmar Sep 02 '21 at 18:04
  • Please post a [mcve]. You can use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to make it executable. – Barmar Sep 02 '21 at 18:05
  • I think you need to read up on static verse instantiated a bit. This jumps back and forth between them and will likely break. – Clayton Engle Sep 02 '21 at 18:32
  • @Barmar if it can't affect how the ``obj.fill()`` works then why won't it add anything to canvas even when I use only numbers for the parameters of .arc as long as I call a class before the ``.fill()`` is called. – Shadow Sep 02 '21 at 18:51
  • @ClaytonEngle wdym? I am not using the thing that determins that the method is to return something unless I actually am and I am using the Java's rules of classes/methods by using 'static void' when it isn't returning something. – Shadow Sep 02 '21 at 18:53
  • Javascript *might* power through and still work, however you have instance members being referenced by `this` in a static class method. In a static method, `this` references the class itself, and will affect static members, not the object instance. Think of it like this, what if you want to draw 2 circles? You will have two `= new Circle()` statements, however when you call the `setPosition()` method, which object will it affect? – Clayton Engle Sep 02 '21 at 18:58
  • 1
    @ClaytonEngle I see, because it'll most likely either affect the last one or it'll affect both of them at the same time and put them in the same place if you want to declare them both before creating the shape, so basically the 'static' makes the clients (variables) inside the method reference the method alone rather than the class, object, and method. Or is that wrong? Either way I should remove the static from the method – Shadow Sep 02 '21 at 19:29
  • Sort of. Static makes it so that you are referencing the class. Without it, you are referencing the instance of the object. You can have many instances and create a new one just by using the new ClassName() call. The static members are not a part of that instance, rather, they affect the class itself. If you were to only ever have one circle, then it would be silly to say new Circle(). You would just say Circle.performAction(), and it would. More here: https://stackoverflow.com/a/50252200/6775641 – Clayton Engle Sep 02 '21 at 19:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/236704/discussion-between-shadow-and-clayton-engle). – Shadow Sep 02 '21 at 19:48

0 Answers0