Javascript HTML5画布-圆形渲染问题

我正在试验HTML5画布，在绘制圆/弧时遇到了一些问题，当我做一个圆时，它看起来更像是一个扭曲的椭圆形。我不确定我做错了什么

这是我的js，下面是代码

<script>
$(document).ready(function drawOnCanvas() {
$("a#draw").click(function(){
 var canvas = document.getElementById("canvas_1");
    if ( canvas.getContext ) {
        var canvas_context = canvas.getContext("2d");
         console.log("2D context supported");
        // Drawing circles
        var start_degrees = 0;
        var end_degrees = 360;
        var start_angle = ( Math.PI/180 ) * start_degrees;

        var end_angle = ( Math.PI/180 ) * end_degrees;
        canvas_context.beginPath();
        canvas_context.arc(100,100,25,start_angle, end_angle, true);
        canvas_context.strokeStyle="rgb(0,222,0)";
        canvas_context.fill();
    }
    else{
     alert("Not Working");
    }
}); 
});
</script>

$（文档）.ready（函数drawOnCanvas（）{
$（“绘制”）。单击（函数（）{
var canvas=document.getElementById（“canvas_1”）；
if（canvas.getContext）{
var canvas_context=canvas.getContext（“2d”）；
log（“支持2D上下文”）；
//画圈
var start_degrees=0；
var end_度=360；
变量开始角度=（Math.PI/180）*开始角度；
var end_角度=（Math.PI/180）*end_度；
canvas_context.beginPath（）；
canvas_context.arc（100100,25，开始角度，结束角度，true）；
canvas_context.strokeStyle=“rgb（0222,0）”；
canvas_context.fill（）；
}
否则{
警报（“不工作”）；
}
}); 
});

小提琴：

---

问题在于画布内部大小不符合渲染它的视口

在初始化中添加以下内容：

var canvas = document.getElementById('canvas_1');
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth

---

您应该将画布大小设置为具有正确的纵横比

范例

<canvas id="canvas_1" width="500" height="500>

---

您需要设置画布的宽度和高度，以便正确计算。试试下面的，它现在似乎在你的小提琴里工作

非常感谢你。！
canvas.height = $("#canvas_1").clientHeight;
canvas.width = $("#canvas_1").clientWidth;