背景が

Question

HTML5のキャンバスにrectange用着色行うことができない私は成功せず、矩形の境界線と背景GREENの色を作るために、この行を追加：

context.fillStyle = 'green'; 
context.fill(); 
context.strokeStyle = 'green'; 
context.stroke(); 

ここJSFIDDLEで私のコードを： https://jsfiddle.net/f5z8qtcp/1/

緑の矩形を背景にも色づけるには...灰色の矩形を作成している間は、そのようにする必要があります。結果を色付けするだけです（既に緑色に着色されています）。

ありがとうございます。

Answer 1

fillRect機能の使用：

function drawAll(){ 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.lineWidth=1; 
    ctx.strokeStyle='green'; 
    ctx.fillStyle = 'green'; 
    for(var i=0;i<rects.length;i++){ 
    var r=rects[i]; 
    ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top); 
    ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top); 
    } 
}