Canvas redrawing/erasing when window resizes

Question

Im having a few issues resetting my canvas when the window re-sizes or after a given amount of time. I want to complete reset and have it fresh. The problem is if your wait a few minutes (Because the refresh runs) or you re-size your window, everything starts to go haywire. I believe its because its drawing the canvas over top of an existing one and that's whats bleeding through. Any ideas on how to resolve this?

 // Constellations function constellations() { var pr = (function () { var ctx = document.createElement("canvas").getContext("2d"), dpr = window.devicePixelRatio || 1, bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; return dpr / bsr; })(); function t() { this.x = Math.random() * o.width, this.y = Math.random() * o.height, this.vx = -.5 + Math.random(), this.vy = -.5 + Math.random(), this.radius = Math.random() } function d() { for (a.clearRect(0, 0, o.width, o.height), i = 0; i < r.nb; i++) r.array.push(new t), dot = r.array[i], dot.create(); dot.line(), dot.animate() } var o = document.querySelector("#constellations"); var ratio = pr; o.width = $(window).width() * ratio; o.height = $(window).height() * ratio; o.style.width = $(window).width() + "px"; o.style.height = $(window).height() + "px"; o.style.display = "block"; var n = "#1A2732"; var linecolor = "#FF535A"; a = o.getContext("2d"); a.setTransform(ratio, 0, 0, ratio, 0, 0); a.clearRect(0, 0, o.width, o.height); a.fillStyle = n; a.lineWidth = .1; a.strokeStyle = linecolor; var e = { x: 30 * o.width / 100, y: 30 * o.height / 100 }, r = { nb: o.width / 10, distance: 80, d_radius: 150, array: [] }; t.prototype = { create: function() { a.beginPath(), a.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, !1), a.fill() }, animate: function() { for (i = 0; i < r.nb; i++) { var t = r.array[i]; ty < 0 || ty > o.height ? (t.vx = t.vx, t.vy = -t.vy) : (tx < 0 || tx > o.width) && (t.vx = -t.vx, t.vy = t.vy), tx += t.vx, ty += t.vy } }, line: function() { for (i = 0; i < r.nb; i++) for (j = 0; j < r.nb; j++) i_dot = r.array[i], j_dot = r.array[j], i_dot.x - j_dot.x < r.distance && i_dot.y - j_dot.y < r.distance && i_dot.x - j_dot.x > -r.distance && i_dot.y - j_dot.y > -r.distance && i_dot.x - ex < r.d_radius && i_dot.y - ey < r.d_radius && i_dot.x - ex > -r.d_radius && i_dot.y - ey > -r.d_radius && (a.beginPath(), a.moveTo(i_dot.x, i_dot.y), a.lineTo(j_dot.x, j_dot.y), a.stroke(), a.closePath()) } }; var refresh = setInterval(d, 1e3 / 30); $(window).resize(function() { window.clearInterval(refresh); constellations(); }); }constellations(); 

 <canvas id="constellations"></canvas> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

To see it working in action. Just re-size the divider and watch. It may even be a case of reseting the function. Im not sure what should be done to resolve this issue. Its a weird one. https://jsfiddle.net/v4dqgazr/

Answer 1

The problem is, as the browser is being resized, $(window).resize() is triggered continuously as the resizing is in progress. You can use David Walsh's debounce method to solve this issue.

Here is an update demo with event logs

The debounce method looks like this

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Answer 2

Just wanted to give some insight on what's happening:

Every instant that the window is being resized, constellations() is being called. Apparently different browsers handle this differently, Dhiraj's answer should help you.

I added code like this, which shows you that many instances are being created and are running:

function constellations(instanceID) {

...

function d() {
    console.log("Draw called from instance id: " + instanceID;
    ...
}


$(window).resize(function() {
    window.clearInterval(refresh);
    constellations(Math.random());
});

You'll see a lot of log calls being made once you resize.