Why is my canvas creating ellipses when I want to create circles?

Question

Everytime I try to make a circle by this method (where board is the canvas board which has the context of 2d):

        board.lineWidth = 4;
        board.beginPath();
        board.arc(canvas.width/2, canvas.height/2, 10,0,360);
        board.strokeStyle = "blue";
        board.stroke();
        board.closePath();

It always created more of a ellipse than a circle and it never go by the coordinates I give it. If I say canvas.width/2 and with height (to center it) it even goes outside the canvas itself. When I give it something else like 30 it goes much further than 30 pixels aswell.

Sidenote: My width and height of my canvas are both 500 pixels.

Same problem? http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties — Johan Karlsson, Aug 04 '15 at 20:19
If your sizing the canvas with CSS--don't. Instead, resize using `canvas.width` and `canvas.height`. — markE, Aug 04 '15 at 21:43
It was because i sized it with css. Thank you very much! That helped me alot :) — Axeowny, Aug 05 '15 at 11:18

score 1 · Answer 1 · answered Aug 04 '15 at 19:57

1

5th parameter of arc expected to be an angle in radians, not degrees.

360 degrees = 2 * PI

So you have to change your code to:

...
board.arc(canvas.width/2, canvas.height/2, 10, 0, Math.PI * 2);

answered Aug 04 '15 at 19:57

hindmost

7,125
3
27
39

1

That's true, but I think a wrong angle would still produce a circle, not an ellipse. – Oriol Aug 04 '15 at 20:49

Why is my canvas creating ellipses when I want to create circles?

1 Answers1