HTML5 Canvas blocked after window resize

Question

What I'm trying to accomplish is simply to redraw some stuff on my canvas after it's resized. My problem is that after the canvas resizes, nothing seems to appearing on it. I tried to put some simple code for drawing a rectangle inside the resizing handler as well, and what I noticed is that the rectangle appears during the window resizing and afterwards the canvas is left blank. Below is my code.

    var canvass = document.getElementById('zipper-canvas');
    var ctx = canvass.getContext('2d');
    var repetitions;

    var firstRowX = 0; var firstRowY ;
    var secondRowX = 5; var secondRowY ;
    $(function() {

        canvass.width = window.innerWidth;
        repetitions = canvass.width / 10;
        canvass.height = 30;
        ctx = canvass.getContext('2d');
        firstRowY = canvass.height / 2 - 3;
        secondRowY = canvass.height / 2 + 1;

        redraw();

        //resize the canvass to fill browser window dynamically
        window.addEventListener('resize', resizecanvass, false);

        //for some reason i cannot draw on the canvas after it was resized
        function resizecanvass() {
            canvass.width = window.innerWidth;
            repetitions = canvass.width / 10;
            canvass.height = 30;
            ctx = canvass.getContext('2d');
            firstRowY = canvass.height / 2 - 3;
            secondRowY = canvass.height / 2 + 1;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when
             * you resize the browser window and the canvass goes will be cleared.
             */

            redraw();
        }


        function redraw() {
            canvass = document.getElementById("zipper-canvas");
            ctx = canvass.getContext('2d');
            ctx.clearRect(0, 0, canvass.width, canvass.height);
            console.log(repetitions);
            for (var r = 0; r < repetitions; r++) {
                ctx.beginPath();
                ctx.rect(firstRowX, firstRowY, 5, 5);
                ctx.fillStyle = "#edeeef";
                ctx.fill();
                ctx.closePath();
                firstRowX = firstRowX + 10;
            }
            for (var r2 = 0; r2 < repetitions; r2++) {
                ctx.beginPath();
                ctx.rect(secondRowX, secondRowY, 5, 5);
                ctx.fillStyle = "#a2a3a5";
                ctx.fill();
                ctx.closePath();
                secondRowX = secondRowX + 10;
            }
        }
    });

Answer 1

The problem is that you don't reset your firstRowX and secondRowX variables, so you end up drawing outside the canvas. I fixed that and also moved variable definitions where they belong.

var canvass = document.getElementById('zipper-canvas');
// Could be const
var firstRowX = 0;
var secondRowX = 5;
// Set the correct size on load
resizecanvass();

//resize the canvass to fill browser window dynamically
window.addEventListener('resize', resizecanvass, false);

//for some reason i cannot draw on the canvas after it was resized
function resizecanvass() {
    canvass.width = window.innerWidth;
    canvass.height = 30;
    /**
     * Your drawings need to be inside this function otherwise they will be reset when
     * you resize the browser window and the canvass goes will be cleared.
     */
    redraw();
}


function redraw() {
    var ctx = canvass.getContext('2d');
    ctx.clearRect(0, 0, canvass.width, canvass.height);
    
    var repetitions = canvass.width / 10;
    var firstRowY = canvass.height / 2 - 3;
    var secondRowY = canvass.height / 2 + 1;
    
    for (var r = 0; r < repetitions; r++) {
        ctx.beginPath();
        ctx.rect(firstRowX + r*10, firstRowY, 5, 5);
        ctx.fillStyle = "#edeeef";
        ctx.fill();
        ctx.closePath();
    }
    for (var r2 = 0; r2 < repetitions; r2++) {
        ctx.beginPath();
        ctx.rect(secondRowX + r2*10, secondRowY, 5, 5);
        ctx.fillStyle = "#a2a3a5";
        ctx.fill();
        ctx.closePath();
    }
}

canvas {
  outline:1px solid black;
}
body, html, canvas {
    margin: 0px;padding:0px;
    }

<canvas id='zipper-canvas'></canvas>

Here's a JSFiddle where you can test the resizing behavior:

https://jsfiddle.net/Darker/noxd4x64/1/

Note that the same effect could be achieved using CSS background without any programming.