Preventing Canvas Clear when Resizing Window

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().

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.

Set canvas size with style (css) and do not change attributes.

After resize to fullscreen

Canvas will be resized and not cleared, but will be scaled, than to prevent scale - you need rescale after resize, here is math:

var oldWidth    =  $("canvas").css("width").replace("px", "");
var oldHeight   = $("canvas").css("height").replace("px", "");  

$("canvas").css({ 
            "width" : window.innerWidth, 
            "height": window.innerHeight
        }); 



var ratio1 =  oldWidth/window.innerWidth;
var ratio2 =  oldHeight/window.innerHeight;



canvas.ctx.scale(ratio1, ratio2);

Please note, that I made copy paste from my code and do some changes with ids and vars names for fast, so could have some small mistkaes like "canvas.ctx" or dom calls.

one way I solved this was:

const canvas = document.getElementById('ctx')
const ctx = canvas.getContext('2d')
var W = canvas.width, H = canvas.height
function resize() {
    let temp = ctx.getImageData(0,0,W,H)
    ctx.canvas.width = window.innerWidth - 99;
    ctx.canvas.height = window.innerHeight - 99;
    W = canvas.width, H = canvas.height
    ctx.putImageData(temp,0,0)
}

the only issue is that on zooming back out you lose the data that was outside the canvas