Graphic circle positioning

[DaedraKyne]

Hi all! New member here!

A few minutes ago, I was working on my game's prototype, when I realized something that kinda ticked me off ?

So, I created two seperate graphics, both of them at the same position, containing each one circle (x = 0, y = 0), one of the circles with a fixed radius, and the other one with an increasing radius. Weirdly, these circles did not seem to be centered at the same spot, since the left side of the bigger circle is closer to the left side of the smaller circle, that the right side of the bigger circle to the right side of the smaller circle. Here are a few pics to show what I mean, as well as the code I used:
Circles: 

Code: 

 

Edit: Btw, the radius is augment every time by 0.02, so it's not a full number.

[ivan.popelyshev]

Make a fiddle.

[DaedraKyne]

Edit: Oh right here you go: https://jsfiddle.net/7afzr91g/61/ @ivan.popelyshev
?

[DaedraKyne]

Bump :3

[ivan.popelyshev]

How do I test it? i just see two circles.

[DaedraKyne]

? what do you mean, test? ? If I didn't explain well beforehand, I was trying to ask for help to find out why the two circles weren't in positioned/aligned the same, even though their x and y positions correspond. Also, i noticed this bug varies depending on the background colour, so it happens on a black background, but not on a white one.

[botmaster]

Those graphics align just fine up until you move them < now this is a clue to help you find the solution yourself. If you stop your code just after you add those 2 graphics on the stage then you always get perfect align, if you let your code go further then you lose the align. That should really help you figure that out.