Want my canvas draw a circle but result in a eclipse [duplicate]

Question

Here is my jsfiddle:jsfiddle

I can't figure out why this code result in a eclipse, please take a look my code below, this is an animation using requestAnimationFrame.

function circleGraph(radius) {
  return {
    type: 'circle',
    radius: radius,
    currentAngleAnimate: 0
  }
}
$(document).ready(function () {
  var canvas = document.getElementById('mycanvas');
  var context = canvas.getContext('2d')
  var width = canvas.width;
  var height = canvas.height;
  var circleObj = circleGraph(50);

  context.lineWidth = 1;
  context.strokeStyle = '#ad2323';
  context.fillStyle = '#ad2323';

  var draw = function () {
    context.clearRect(0, 0, width, height);
    context.beginPath();
    circleObj.currentAngleAnimate += Math.PI * 2 / 60;
    context.arc(width / 2, height / 2, circleObj.radius, -Math.PI / 2, circleObj.currentAngleAnimate, false);
    context.stroke();
    context.lineTo(width / 2, height / 2);
    context.fill();
    requestAnimationFrame(draw)
  }
  requestAnimationFrame(draw);
});

Answer 1

Your canvas has a default width and height of 300 x 150 pixel. Those are the attributes of the canvas HTML element. You then stretch the canvas via CSS rules to 400 x 400 pixel - however, the CSS rules only affect how the canvas is displayed, not the resolution of the canvas.

Solution: Remove your CSS and set the width and height attributes:

<canvas id="mycanvas" width="400" height="400></canvas>

Answer 2

Remove height and width from your CSS rule:

#mycanvas {
  border: thin solid green;
  position: relative;
}

Now, add width and height through html attributes and it should work:

<canvas id="mycanvas" height="400" width="400"></canvas>