画布图形是否会超出HTML元素的固定限制？

Question

尽管我已尽力将两者结合在一起，但我遇到的情况是我的画布图形小于或超出画布元素的限制。

我正在使用引导程序并将其禁用，以确保它是Javascript或逻辑问题。

index.html-

<canvas id="canvas" class="w-100 test"></canvas>

style.css-

.w-100 {
    width: 100%;
}

ui.js-

function resizeCanvas() {

    const $canvas = $('canvas')
        $canvas.clearCanvas()
    $canvas.width($canvas.parent().width)
    $canvas.height($canvas.width() / 2)

    $('canvas').drawRect({
      fillStyle: '#FAE3BF',
      x: 0, y: 0,
      width: $canvas.width(),
      height: $canvas.height(),
      fromCenter: false
    })

    $('canvas').drawRect({
      fillStyle: '#d2bb9b',
      x: 0.1625 * $canvas.width(), y: 0,
      width: 0.15 * $canvas.width(),
      height: $canvas.height(),
      fromCenter: false
    })

}

$(window).resize(resizeCanvas)

$(document).ready(() => {
    resizeCanvas()
})

当您放大到真正的大小时，尽管canvas元素具有一定的可见尺寸，但它似乎仍在其中延伸。

我无法完全解释这个问题-我只能想象我正在使用CSS或类似内容进行双重调整。

这是在不同比例下的样子-

在小比例尺上，实际的绘图是成比例的，虽然比画布小，但在中比例尺上，它是稍微不成比例的，并且从总体上来说是完全不合时宜的-我怀疑在大中型时，绘图超出了画布中的范围一些看不见的时尚。