rect() 方法創建矩形

fillRect() 方法繪制“已填色”的矩形。默認的填充顏色是黑色。通過fillStyle修改填充色

strokeRect() 方法繪制矩形（不填色）。筆觸的默認顏色是黑色

rect()

    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');
    ctx.rect(20,20,50,30);
    ctx.stroke();
    ctx.fillStyle = 'red';
    ctx.fillRect(80,20,50,30);
    ctx.strokeRect(20,80,50,30);
    ctx.fillRect(80,80,80,50);

clearRect() 方法清空給定矩形內的指定像素。

clearRect()

    var c2 = document.getElementById('mycanvas2');
    var ctx2 = c2.getContext('2d');
    ctx2.fillStyle = 'red';
    ctx2.fillRect(10,10,200,100);
    //clearRect() 方法清空給定矩形內的指定像素。
    //context.clearRect(x,y,width,height);
    ctx2.clearRect(20,20,100,50);