JavaScript矩形宽高调整方向疑问：是否固定单侧变化？

• 调整width时默认仅从右侧变化，调整height时默认仅从下方变化，但这不是绝对固定的表现，而是大多数场景下的默认行为。
• 核心原因是前端领域的坐标系与布局基准逻辑：
  • 不管是Canvas、SVG这类绘图API，还是DOM元素的默认布局，大多以左上角作为定位基准点。比如Canvas的ctx.rect(x, y, width, height)方法，x和y是矩形左上角的坐标，修改width时左上角位置不变，自然只会从右侧延伸或收缩；DOM元素默认布局中，元素的左上角位置由top/left（或默认流中的位置）固定，修改height时顶部位置不动，变化就只会体现在下方。
• 这种默认行为是前端开发里的普遍情况，符合屏幕坐标系的常规设定（屏幕左上角为原点，x轴向右递增，y轴向下递增），逻辑简单直观，便于开发者计算和控制元素/图形位置。
• 如果需要改变这种变化方向，完全可以手动调整：
  • DOM元素可以通过修改transform-origin（比如设置为left center让宽度从左侧变化），或者改用right/bottom属性配合定位来控制尺寸，甚至用transform: scale实现对称缩放。
  • Canvas/SVG中，可以在修改尺寸的同时重新计算基准坐标，比如要让矩形宽度从左侧延伸，就把x坐标减去宽度增加的数值，保持矩形中心或右侧位置不变。

内容的提问来源于stack exchange，提问作者Hafsa Zinthikar