This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Cari Bantuan

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Pelajari Lebih Lanjut

Utas ini telah diarsipkan. Silakan membuat pertanyaan baru jika Anda membutuhkan bantuan.

Canvas drawing combined arc s bug?

  • 3 balas
  • 1 memiliki masalah ini
  • 1 kunjungan
  • Balasan terakhir oleh patrickmc

jrie
jrie
more options

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.

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.

Solusi terpilih

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!

Baca jawaban ini dalam konteks 👍 0

Semua Balasan (3)

patrickmc
patrickmc
more options

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

jrie
jrie Pemilik pertanyaan
more options

Solusi Terpilih

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!

patrickmc
patrickmc
more options

You are welcome and thanks for updating us. I'll mark your issue as solved.