what is the purpose of circle.x and circle.y in createjs example?

Question

I am trying to see why createjs used this code in its example:

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

why does it have (0,0) in the coordinates when drawing the circle (0,0,50), but they give circle.x and circle.y values?

If I execute the first two lines onto a canvas, and run circle.x, they are undefined. Why, I thought it was set to 0,0?

Answer 1

CreateJS provides an easy way to treat graphics and symbols as instances, and then move them around once they are created.

1. The drawing coordinates are the shape's dimensions, and how they offset. This determines how something would behave if it rotates.

2. The x and y parameters let you then control the positioning of your object inside a parent container. So you could move the circle anywhere in your canvas, but it would still have a "center" of [0,0].

Separating these is a pretty common approach and lets you consider the dimensions of the shape separately from where its drawn on the screen. This is especially true once you start to nest shapes in containers in other containers.

Another example is that two Shapes can share the same graphics instances, but be moved separately around the stage. They have identical drawing instructions, but can be scaled, translated, rotated, and skewed separately.