# 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.