Preventing Canvas Clear when Resizing Window

Question

I'm trying to create a simple app that draws rectangles within the Canvas tag. I've got the Canvas resizing to fullscreen, but whenever I resize the viewport, Canvas clears. I'm trying to prevent it from clearing and just keeping the content that's within it. Any ideas?

http://mediajux.com/experiments/canvas/drawing/

  /*
  * This is the primary class used for the application
  * @author Alvin Crespo
  */
  var app = (function(){

    var domBod          = document.body;
    var canvas          = null;
    var canvasWidth     = null;
    var canvasHeight     = null;
  
    return {

      //Runs after the DOM has achieved an onreadystatechange of "complete"
      initApplication: function()
      {
        //setup envrionment variables
        canvas = document.getElementById('canvas') || null;
  
        //we need to resize the canvas at the start of the app to be the full window
        this.windowResized();
  
        //only set the canvas height and width if it is not false/null
        if(canvas)
        {
          canvasWidth = canvas.offsetWidth;
          canvasHeight = canvas.offsetHeight;        
        }
  
        //add window events
        window.onresize = this.windowResized;   
  
        circles.canvas = canvas;
        circles.canvasWidth = canvasWidth;
        circles.canvasHeight = canvasHeight;
        circles.generateCircles(10);  
  
        setInterval(function(){
            circles.animateCircles();
        }, 50);   
      },

      /**
      * Executes Resizing procedures on the canvas element
      */
      windowResized: function()
      {
        (this.domBod === null) ? 'true' : 'false';
        try{
          console.log(canvas);
          canvas.setAttribute('width', document.body.clientWidth);
          canvas.setAttribute('height', document.body.clientHeight);        
        }catch(e) {
          console.log(e.name + " :: " + e.message);
        }
      },

      /**
      * Returns the canvas element 
      * @returns canvas
      */
      getCanvas: function()
      {
        return canvas;
      }

    };
  })();

Answer 1

I believe you have implement a listener for screen resize and redraw the canvas content when that listener fires.