Max Max - 23 days ago 10
Javascript Question

Why is canvas arc not circular?

In JSFiddle, I create an arc using the standard syntax and it creates a long skinny elips. I found out that the css I am applying is dictating it's dimensions and not the canvas. Why is this?

JSFiddle: https://jsfiddle.net/jey2fodj/2/

HTML:

<div id='drawSpace'></div>


CSS:

.circle {
height: 100px;
width: 100px;
border: 1px solid black;
}


JavaScript:

var c = document.createElement('canvas');
c.className = 'circle';

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,3*Math.PI);
ctx.stroke();

document.getElementById('drawSpace').appendChild(c);


Go ahead and change the width/height for the style to help understand the question. Thank you.

Answer

Changing the canvas's dimensions stretches the canvas. To avoid doing that, try setting the width and height properties separately from the style property.

Source: http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

As a side note, for circles, you only need 2*Math.PI, not 3*Math.PI.