How to redraw canvas on window resize

Question

I'm trying to redraw a canvas when the window gets resized.

At the moment when the window resizes, the canvas doesn't redraw the blue rectangle and it doesn't show the erase effect.

I'm new to canvas and I can't figure this out.

How can I fix this?

var canvas = document.getElementById("canvasTop");
// set the canvas element's width/height to cover #wrapper
var wrapper=document.getElementById('wrapper');
var wrapperStyle=window.getComputedStyle(wrapper,null);
canvas.width=parseInt(wrapperStyle.getPropertyValue("width"));
canvas.height=parseInt(wrapperStyle.getPropertyValue("height"));
//
var ctx = canvas.getContext("2d");
    ctx.lineWidth = 10;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.fillStyle = "skyblue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // set "erase" compositing once at start of app for better performance
    ctx.globalCompositeOperation = "destination-out";

var canvasOffset = $("#canvasTop").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
    startX = mouseX;
    startY = mouseY;
}

$("#canvasTop").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvasTop").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvasTop").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvasTop").mouseout(function (e) {
    handleMouseOut(e);
});

window.addEventListener("resize", resizeCanvas, false);
 
function resizeCanvas(e) {
  var myCanvas = document.getElementById("canvasTop");
  myCanvas.width = document.documentElement.clientWidth;
  myCanvas.height = document.documentElement.clientHeight;

}

html, body {height:100%}
body { margin:0; padding:0; }
#wrapper {
  position:relative; 
  margin:auto; 
  width:100%; 
  height:100%; 
  background-color:#ffffff;
}
#canvasTop {
  position:absolute; 
  top:0px; 
  left:0px; 
}
#text {
  position:absolute; 
  left:0; 
  right:0; 
  margin-left:auto; 
  margin-right:auto; 
  width:400px; 
  height:200px; 
  text-align:center; 
  top: 50%; 
  transform:translateY(-50%); 
}
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag the mouse over center to "scratch-off" reveal</h4>
<div id="wrapper">
  <!-- move #text before #canvasTop -->
  <div id="text">
    <p> Text Text Text Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text Text Text Text</p>
  </div>
  <canvas id="canvasTop" width=512 height=512></canvas>
</div>

Answer 1

you might need to initialize your canvas and other elemnts at window.onload. Because at point you are initializing them, the elements on page might not be available as they've not rendered.

    var canvas , wrapperStyle, wrapper, ctx;
    var startX;
    var startY;
    var isDown = false;
    var canvasOffset, offsetX, offsetY;
    window.onload = function()
    {
         InitCanvas();
    }

    function InitCanvas()
    {
        canvas = document.getElementById("canvasTop");
        wrapper=document.getElementById('wrapper');
        wrapperStyle=window.getComputedStyle(wrapper,null);
        canvas.width=parseInt(wrapperStyle.getPropertyValue("width"));
        canvas.height=parseInt(wrapperStyle.getPropertyValue("height"));

        ctx = canvas.getContext("2d");
        ctx.lineWidth = 10;
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        ctx.fillStyle = "skyblue";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // set "erase" compositing once at start of app for better performance
        ctx.globalCompositeOperation = "destination-out";

        canvasOffset = $("#canvasTop").offset();
        offsetX = canvasOffset.left;
        offsetY = canvasOffset.top;
    }

    function resizeCanvas()
    {    
         var myCanvas = document.getElementById("canvasTop");
         myCanvas.width = document.documentElement.clientWidth;
         myCanvas.height = document.documentElement.clientHeight;
         InitCanvas();
    }

Update 14-4-2017: Call resizeCanvas on body onresize.

    <body onresize="resizeCanvas(event)" >

Update: You might need to wire up events like this.

    <canvas id="canvasTop" width="512" height="512" onMouseDown="handleMouseDown(event)" onmousemove="handleMouseMove(event)" onMouseup="handleMouseUp(event)" onmouseout="handleMouseOut(event)"   ></canvas>