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 thats within it. Any ideas?

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

Thanks!

      /*       * 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

Setting the canvas width attribute will clear the canvas. If you resize the style width (e.g. canvas.style.visibility), it will scale (usually not in such a pretty way). If you want to make the canvas bigger but keep the elements in it as they are, i would suggest storing the canvas as an image -- e.g. call the toDataURL method to get the image, then draw that to the resized canvas with drawImage().

Answer 2

Here's how I solved this problem with JS3.

Internally, I store the main canvas and context as _canvas and _context respectively.

function resize(w, h){ // create a temporary canvas obj to cache the pixel data //     var temp_cnvs = document.createElement('canvas');     var temp_cntx = temp_cnvs.getContext('2d'); // set it to the new width & height and draw the current canvas data into it //      temp_cnvs.width = w;      temp_cnvs.height = h;     temp_cntx.fillStyle = _background;  // the original canvas's background color     temp_cntx.fillRect(0, 0, w, h);     temp_cntx.drawImage(_canvas, 0, 0); // resize & clear the original canvas and copy back in the cached pixel data //     _canvas.width = w;      _canvas.height = h;     _context.drawImage(temp_cnvs, 0, 0); } 

JS3 also provides an autoSize flag which will automatically resize your canvas to the browser window or the dimensions of its parent div.