Javascript 响应画布元素

我已经创建了一个响应画布，但我很难弄清楚如何使画布中的矩形元素也响应。我需要矩形始终是画布宽度的100%，高度也需要是静态的50px

画布Html

<div id="newCanvas" role="main">
    <canvas id="respondCanvas" width="100" height="100">
        Please use a different browser
    </canvas>
</div>

Javascript

$(document).ready( function(){
    //Get the canvas & context
    var c = $('#respondCanvas');
    var ct = c.get(0).getContext('2d');
    var container = $(c).parent();

    //Run function when browser resizes
    $(window).resize( respondCanvas );

    function respondCanvas(){
        c.attr('width', $(container).width() ); //max width
        c.attr('height', $(container).height() ); //max height

        //Call a function to redraw other content (texts, images etc)
    }

    //Initial call
    respondCanvas();

    // Code I used to draw a road
    //function drawRoad() {
    //    ctx.beginPath();
    //    ctx.rect(x, y, w, h);
    //    ctx.closePath();
    //    ctx.fill();
    //};

    //drawRoad();

    //    var can = document.getElementById("newCanvas");
    //    var ctx = can.getContext("2d");
    //    ctx.moveTo(0, 75); //x-axis, y-axis
    //    ctx.lineTo(400, 75);
    //    ctx.strokeStyle = "grey";
    //    ctx.lineWidth = 20;
    //    ctx.stroke();

});

演示

参考资料：

---

要获得所需的结果，必须每隔几毫秒重新绘制画布并重新绘制所有对象，因此必须存储要绘制的对象。然后可以更改这些存储对象中的变量（使用事件处理程序、setTimeout（）等），以查看画布中反映的更改

主循环示例：

function update(){
    ctx.beginPath;
    for(var i=0; i<rects.length;i++){
        ctx.drawRect(rects[i][0],rects[i][1],rects[i][2],rects[i][3]);
    }
    ctx.stroke();
}

或

要编辑矩形的高度，请执行以下操作：

rects[#][3] = 15;

---

听起来不错，就像我看到的使用类似概念的例子一样。不幸的是，我自己不知道怎么做。@Markus我会给你一个例子，但似乎我达到了某种字符限制，甚至在答案本身。请尝试更新我的JSFIDLE

rects[easily rememberable number] = [x,y,width,height];

rects.push(x,y,width,height);

rects[#][3] = 15;