キャンバスの描画削除

###前提・実現したいこと
キャンバスを背景にサイトを作っているのですが。
リサイズをするたびに背景画像の■が増えて行ってしまいます。
どこにグラフィッククリアを入れればいいのかわからない状態です。
またＣＳＳのほうで

myCanvas {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

body {
position:absolute;
top:0;
left:0;
}

このように記載しＨＴＭＬと
キャンバスを重ねたのですが、別にＣＳＳで記載したように
センタリングができていません解決方法わかる方
いましたら教えていただけると嬉しいです。

###該当のソースコード
js easeljs jquery

    var w = 100;
    var h = 100;
    var stage;
    var shape;
    function init() {
      var canvas = document.getElementById("myCanvas");
      stage = new Stage(canvas);
       // 描画更新
    // windowのリサイズ設定
    var id;
    $(window).on('resize', function(e){
        clearTimeout(id);
        id = setTimeout(function(){
            stage.canvas.width = $(e.target).width();
            stage.canvas.height = $(e.target).height();
	    w = $(e.target).width();
	    h = $(e.target).height();
            for (var i=0;i<80;i++) {
              drawRect(); // 四角っぽい物の表示
            }
	    stage.update();
	    shape.graphics.clear();
        }, 100);
    });

    $(window).trigger('resize');

    }

    function drawRect() {
      shape = new Shape();
      var hue = 360*Math.random();// ここで0から360までの乱数を算出
      shape.graphics.beginStroke("hsl("+hue+",100%,50%)");
      var x1 = w*Math.random();// ここで0からｗまでの乱数を算出
      var y1 = h*Math.random();// ここで0からｗまでの乱数を算出
      var vy1 = 80*Math.random();// ここで0から80までの乱数を算出

      shape.graphics.beginFill("hsl("+hue+",100%,50%)");
      shape.graphics.drawRect(x1,y1,vy1,vy1);

      stage.addChild(shape);
    }