Javascript 为什么画布中创建的rect不'；是否遵循规定的宽度和高度？

我有一个div，在div中我有一个画布，我需要在画布中创建一个rect

this.canvas = {
            innerElement: TBE.CreateRectCanvasElement (Element.config.displayWidth, Element.config.displayHeight)
        };
    this.canvas.innerElement.style.border = '1px solid black';
    this.innerElementCtx = this.canvas.innerElement.getContext("2d");
    this.innerElementCtx.fillStyle = '#3ac6e5';
    this.innerElementCtx.fillRect(50, 50, 100, 100);

但是矩形距离左上角不是50px n 50px，高度比宽度大很多。。。为什么?

---

这是因为您没有在HTML中设置

的宽度和高度。

---

它的默认值为

1:1

比率，由于您在CSS中设置为

100:300

，因此它的宽度缩小了

1/3

在html和CSS中设置它有什么区别？我曾经问过这个qn（），给出的ans建议我使用css而不是html，因为html一个不起作用…html定义了它的大小，在css中设置不同的大小会拉伸它。顺便说一句，在我的代码中添加宽度n高度的setAttribute之后，它就起作用了！但是为什么我问的另一个qn中的HTML不起作用，而CSS起作用呢？thx@yeeen，恭喜！：）就这样想吧：HTML设置它的大小，CSS拉伸它。