1
\$\begingroup\$

I've got a job to make an engine and light game for canvas in HTML5. I like the things I make to be centered on the x,y positions I give it, I don't know why, it just helps me think about them clearer. I've got it set up for rectangles, all I had to do was subtract half the hieght and half the width from the x/y supplied like this:

c.fillRect(x-width/2,y-height/2,width,height);

But I'm rather stumped when trying to do this with arcs. At first I thought it would be simple, I just did this:

c.beginPath();
c.arc(x-rad/2,y-rad/2,rad,0,Math.PI*2,false);
c.closePath();

But here's how they look when I try them out, 4 rects of increasing width/height and 4 circles of increasing radius. enter image description here Does anyone know the math needed to calculate the correct offset for arcs?

Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
4
\$\begingroup\$

The X and Y positions given to the HTML5 canvas's arc method are the center of the desired arc. You don't need to offset them.

Improve this answer
\$\endgroup\$
4
  • \$\begingroup\$ ahhhh... Okay, sorry guess I should of done more research. I was working from memory from another time I messed with canvas XD \$\endgroup\$
    – Isaiah
    Oct 6, 2011 at 4:42
  • 1
    \$\begingroup\$ @Isaiah, if this helped you, you should consider marking it as the accepted answer (likewise with some of your other questions, which have answers you seem to have liked but have not yet accepted). \$\endgroup\$
    – user1430
    Oct 6, 2011 at 15:11
  • \$\begingroup\$ I wanted to wait a bit before accepting an answer. As I do all my questions, sometimes though I forget to check back \$\endgroup\$
    – Isaiah
    Oct 7, 2011 at 0:02
  • \$\begingroup\$ @Isaiah: later you can change the accept to another answer or removed it altogether, so you can freely accept it as soon as it satisfies you. \$\endgroup\$
    – o0'.
    Oct 7, 2011 at 12:20
0
\$\begingroup\$

Create arc with progressively larger radius and shifting origin see this demo to get an inspiration http://www.tutorialspark.com/html5/HTML5_Canvas_Arcs.php

Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Welcome to the site. Link-only answers are discouraged, because they are suseptable to link-rot, and they don't provide the helpful information here, where the question lays. It is better to include at least the relevant portion of a link's content in your answer. That said, make sure that your link contains information that has not been covered by previous answers (no need to repeat the same info). \$\endgroup\$
    – Seth Battin
    Feb 24, 2014 at 14:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .