unable to make background colored for a rectange on html5 canvas

Question

I added this lines in order to make color of border and background GREEN for a rectangle, but without success:

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

Here my code in JSFIDDLE: https://jsfiddle.net/f5z8qtcp/1/

How to make the green rectangle colored too in the background ... grey rectangle while creating it must be like it is, i want just to color the result (Border already colored to green).

Thank's.

Answer 1

Use fillRect function:

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);
  }
}