Want my canvas draw a circle but result in a eclipse

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);
});

score 3 · Accepted Answer · edited May 23 '17 at 12:08

3

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>

edited May 23 '17 at 12:08

Community

1
1

answered Jun 21 '16 at 06:33

le_m

19,302
9
64
74

Correct, but your answer is inappropriate. This question has been asked and answered many, many times before. Instead of adding to the pile of duplicate Q&A, please try to point the questioner to one of the many duplicate Q&A. Consider deleting your answer in favor of one of those Q&A. – markE Jun 21 '16 at 19:07
@markE Good, you found a duplicate! However, please refrain from leaving condescending comments by asking fellow users to delete their answers. You are welcome to discuss your personal views here with the community: http://meta.stackoverflow.com/questions/253735/is-it-wrong-to-downvote-a-good-answer-to-a-duplicate-question and http://meta.stackoverflow.com/questions/252009/should-there-be-a-deterrent-for-answering-obvious-duplicate-questions – le_m Jun 21 '16 at 19:45
It's certainly not a personal view that obviously duplicate Q&A should be avoided in order to keep Stackoverflow less cluttered. It's a policy to not post duplicate answers -- hence the "Close: duplicate of..." ability. BTW, my attitude is more frustrated rather than condescending. Nothing personal. :-// – markE Jun 21 '16 at 20:06
@markE I get your frustration, but please also understand how frustrating it is for me to spend time helping out a user (who might or might not have searched for his question before coming up empty handed) and then reading your comment (+ downvote I assume). I am not aware that it is *my* duty to check for duplicate answers on this site and the meta discussions seem to have come to the same conclusion. Please correct me if I am wrong. – le_m Jun 21 '16 at 20:31
Yes, it is **your** duty to check for duplicate answers! From the Stackoverflow [Help Center](http://stackoverflow.com/help/how-to-answer): *"Not all questions can or should be answered here. Save yourself some frustration and avoid trying to answer questions which have already been asked and answered many times before."* I rarely downvote answers and when I do it's almost always a quality issue, but yes I did downvote your answer -- Today I'm feeling frustrated with duplicates, maybe I'll feel better tomorrow. Again, nothing personal ... I'm just currently frustrated. :-) – markE Jun 21 '16 at 21:12

score 1 · Answer 2 · answered Jun 21 '16 at 06:32

1

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>

answered Jun 21 '16 at 06:32

Mohit Bhardwaj

9,650
3
37
64

Want my canvas draw a circle but result in a eclipse

2 Answers2