Javascript HTML画布中的纵横比、高度/宽度

我有一个正方形，我想在其中画一个简单的点， 以百分比定义的正方形宽度和高度。 问题是，这一点是错误的椭圆形

我创建了以下JSFIDLE，它反映了我的问题：

---

您必须首先定义画布的大小（以像素为单位）：

var c = document.getElementById("myCanvas");
c.width = 200
c.height = 200

您还可以通过以下方式100%完成：

var c = document.getElementById("myCanvas");
c.width = c.parentElement.clientWidth
c.height = c.parentElement.clientHeight

但请记住，如果父元素的宽度/高度发生更改，则此值不会更改。你必须再做一次-设置画布的宽度/高度会删除它的内容，所以你必须再画一次

演示：

var c=document.getElementByIdmyCanvas； c、 宽度=c.parentElement.clientWidth c、 高度=c.parentElement.clientHeight var ctx=c.getContext2d； ctx.beginPath； ctx.arc50,50,10,0,2*Math.PI； ctx.fill； 您的浏览器不支持HTML5画布标记。

---

我不知道实际的宽度和高度，只有这个例子是200。我想使用符号，但是你必须：但是你可以检查父元素的大小，试着这样定义你的画布，这似乎画了一个圆

var c = document.getElementById("myCanvas");
c.width = c.parentElement.clientWidth
c.height = c.parentElement.clientHeight