Canvas drawing combined arc s bug?

Question

Hello,
I'm working on a HTML5 canvas game, where some areas should be drawn connceted in some kind of "blob" of circles.
The code im using to draw looks like this, and an example can be found on github:
https://github.com/jrie/Connect
The error is visible when a fleet is navigated outside the main circle, to archive that:
Click on fleet icon, click on planet, pressing T to make a turn and see the fleet moves
At some point, some strange graphic error, looking like a triangle or extension occurs.
Please try different distances, destionations as possible, its always producing this strange effect.
The code in question producing the result is:
Line 2340 until 2348
gameScreen.beginPath();
for (area in env.scanAreas) {
scanArea = env.scanAreas[area];
scanX = scanArea[1] + env.offsetX;
scanY = scanArea[2] + env.offsetY;
gameScreen.arc(scanX, scanY, scanArea[0], 0, 6.28);
gameScreen.closePath();
gameScreen.fill();
If the beginPath and closePath and fill are all stuffed into the for loop, it draws well, but its a different effect and not one "blob" as requested in this case.

Answer 1

Hello Patrick,
thanks for coming back to me. For some reason I did find my problem, it was not really related to the order of the code, but that drawing one circle, then drawing another circle further away, without using a "canvasObject.moveTo" - there is another line draw as the "pencil" moves to the location of the new circle, creating some kind of intersection.
I thought first that this was some kind rendering but, but now it does make some sense - thinking of a turtle drawing engine.
Anyhow, thank you for answering!