canvas自适应全屏问题！求助大神啊

代码如下，问题是为什么第一次打开的时候一切正常，但是当浏览器窗口大小变化的时候canvas里面的内容就没了呢。

var tangram = [

      { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#cff67" },

      { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67becf" },

      { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },

      { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f5la" },

      { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a594c0" },

      { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ecc" },

      { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca69" } 

    ];

(function() {

    initHeader();

    addListeners();

    function initHeader() {

        width = window.innerWidth;

        height = window.innerHeight;

        canvas = document.getElementById('canvas');

        canvas.width = width;

        canvas.height = height;

        var context = canvas.getContext("2d");

        for (var i = 0; i < tangram.length; i++) {

            draw(tangram[i],context);

        }

    }

    function draw(piece,cxt) {

      cxt.beginPath();

      cxt.moveTo(piece.p[0].x, piece.p[0].y);

      for (var i = 1 ; i < piece.p.length; i++) {

        cxt.lineTo(piece.p[i].x, piece.p[i].y);

      }

        cxt.closePath();    

        cxt.fillStyle = piece.color;

        cxt.fill();

    }

    // Event handling

    function addListeners() {

        window.addEventListener('resize', resize);

    }

    function resize() {

        width = window.innerWidth;

        height = window.innerHeight;

        canvas.width = width;

        canvas.height = height;

    }

})();