相对于父级调整div

Question

fiddle就在这里，我的问题基本上是如何让红色矩形相对于父div重新调整大小。换句话说，矩形应该覆盖父级的相同区域，而不管其大小如何。

父div和子项是下面的画布和矩形。

#canvas {
position: relative;

}

.rectangle {
    border: 3px solid red;
    /* background-color: rgba(255, 148, 0, 0.25); */
    position: absolute;
}

红色矩形也延伸到父母之外，我想这与绝对位置有关，如果可能的话应该避免这样做。

修改

矩形在小提琴中被硬编码的原因是，实际上它是由用户在浏览器中绘制的，而我懒得把那些js放在那里。示例矩形是用户可以绘制的内容。

Answer 1

执行此操作:(从div.rectangle中删除内联css）

.rectangle {
    border: 3px solid red;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}