Canvas drawing combined arc s bug?
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.
Isisombululo esikhethiwe
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!
Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0All Replies (3)
Hello jrie,
Thanks for contacting Mozilla Support. This question is out of the scope of what we're able to assist with. I would suggest posting your question over at Stackoverflow. The community there should be able to assist you with this issue.
Thanks, Patrick
Isisombululo Esikhethiwe
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!
You are welcome and thanks for updating us. I'll mark your issue as solved.