Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers 2

up vote 4 down vote accepted

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.

share|improve this answer
    
ahhhh... Okay, sorry guess I should of done more research. I was working from memory from another time I messed with canvas XD –  Isaiah Oct 6 '11 at 4:42
1  
@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). –  Josh Petrie 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 –  Isaiah 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. –  Lohoris Oct 7 '11 at 12:20
add comment

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

share|improve this answer
1  
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). –  Seth Battin Feb 24 at 14:19
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.