Javascript 在画布上画画

我在画布上画了一个圆圈，它的中心点是画布的中点，所以圆圈应该从页面的中心开始，半径应该是屏幕的1/2到3/4。我已经找到了让画布根据窗口大小自动调整大小的方法，但我无法让cirlce自动调整大小。另外，我不能计算出半径，使它看起来像一个圆环与我的规格，目前它看起来像一个拉伸的圆。我应该给半径加什么值，使它看起来像一个正常的圆。此外，它应该能够自我调整窗口大小？ 目前，我有以下值：

var canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var myRadius = canvas.width / 4; 
context.arc(centerX, centerY, myRadius, 0, (Math.PI/180) * 360 , false);
context.fillStyle = 'green';
context.fill()
}

---

您应该处理调整大小事件，并为新画布尺寸重新绘制圆

如果您使用样式调整画布大小，圆圈将按您预期的方式重新绘制：实际上整个画布将作为一个图像：尝试将画布的尺寸从1000更改为100，您将明白我的意思

css:

html:

---

我应该设置什么样的半径值/通常，您应该调整html5画布元素本身的大小，而不是使用CSS调整大小。使用CSS调整画布的大小通常会导致现有内容被扭曲。这是因为浏览器将拉伸和挤压现有像素以适应CSS大小调整后的画布。请参阅：。您显示的代码将绘制一个未拉伸的圆，因此我猜您正在使用CSS调整画布的大小。通常，您应该调整html5画布元素本身的大小，而不是使用CSS调整大小。使用CSS调整画布的大小通常会导致现有内容被扭曲。这是因为浏览器将拉伸和挤压现有像素以适应CSS大小调整后的画布。谢谢你，我会调查的

#canvas {
    height: 100%; 
    width: 100%
}

<canvas id="canvas" height="1000" width="1000"></canvas>