# How can I center a circle around a point on an HTML canvas?

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.closePath();


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

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.

• ahhhh... Okay, sorry guess I should of done more research. I was working from memory from another time I messed with canvas XD Oct 6 '11 at 4:42
• @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).
– user1430
Oct 6 '11 at 15:11
• I wanted to wait a bit before accepting an answer. As I do all my questions, sometimes though I forget to check back Oct 7 '11 at 0:02
• @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.
– o0'.
Oct 7 '11 at 12:20

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

• 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). Feb 24 '14 at 14:19