html canvas javascript填充和描边方法

Question

我正在使用HTML canvas和javascript创建正方形。但是，这很糟糕。我不明白为什么。我创建了两个javascript对象，一个用于空心块，一个用于填充块。我正在迭代两个数组以创建动画块。但是，我一次只能获得一个填充块。我一次无法拥有多个。但是，我成功地创建了空心块。代码是相同的，但它不起作用。这是为什么？

function hBlock(h,w,x,y){
    this.h = h;
    this.w = w;
    this.x = x;
    this.y = y;
this.create = function(){
    ctx.rect(x,y,w,h);
    ctx.stroke();
    }
 }
function fBlock(h,w,x,y){
    this.h = h;
    this.w = w;
    this.x = x;
    this.y = y;
this.create = function(){
    ctx.fillRect(x,y,w,h);
    }
 }

function newblock(){
if(f==1){fBlocks.push(new fBlock(h,w,x,y));}
else{hBlocks.push(new hBlock(h,w,x,y));}
console.log(hBlocks);
console.log(fBlocks);
animate();
}

function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, cw, ch);
if(hBlocks.length>1){hBlocks[hBlocks.length-1].create();}
if(fBlocks.length>1){fBlocks[fBlocks.length-1].create();}
}