Particles.js: Canvas size is 0,0 until window is resized

[Adryd]

On google chrome running with jQuery and Angular the window needs to be resized before the canvas size updates
eg. (before resize)
<canvas class="particles-js-canvas-el" width="0" height="0" style="width: 100%; height: 100%;></canvas>
(after)
<canvas class="particles-js-canvas-el" width="685" height="48" style="width: 100%; height: 100%;"></canvas>

before you ask it is in a div with it's respective id & classes

[lNobodyl]

I have the same problem

[jgontrum]

Any idea how to fix this?

[tedgeving]

Initializing it in a window.load function solved that issue for me.

    $(window).on("load", function() {
        particlesJS.load('particles-js', 'assets/particles.json', function() {
            console.log('callback - particles.js config loaded');
        });
    });

[monkikkichi]

Have the same problem, adding window.load function can't resolve it

[daguilarg]

It works initializating a function for window.load

The way that @tedgeving implements is for use with jQuery. That means that you need import a version of jQuery for use it.

$(window).on("load", function() {
particlesJS('particles-js','assets/particles.json');
});

If you don't want implement the way using jQuery, you must use directly the object window. For this case, you've 2 ways:

window.onload = function () {
particlesJS('particles-js','assets/particles.json');
}

or

window.addEventListener('load', function () {
particlesJS('particles-js','assets/particles.json');
});

You must use a valid URL for the file 'particles.json' (like "https://mydomain.com/particles.json" or "assets/js/particles.json"), because for security reasons, it's not allowed to use local routes for the XMLHttpRequest object, or if not, you can to place all the parameters in JSON format for this argument.

All three methods work well. Each one has its peculiarities, advantages and disadvantages.

[tedgeving]

In my development environment I can reproduce the bug (Chrome 54/Yosemite) sever is a WP VVV install. Resizing the window or enabling the developer tools triggers the canvas size, and the animation is visible.

I tested the same site on the staging sever and have not been able to reproduce the bug. I used a clean virtual machine for all testing with an empty cache (browserstack.com).

All of the files are loaded locally, not from a CDN.
Jquery 1.12.4
Jquery Migrate 1.4.1
Particle v2.0.0

An image file is used for the particle instead.

My Config File

jQuery(document).ready(function($) {
    $(window).on("load", function() {
        particlesJS("particles-js", {
            "particles": {
                "number": {
                    "value": 7,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": "#ffffff"
                },
                "shape": {
                    "type": "image",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    },
                    "image": {
                        "src": "wp-content/themes/theme-name/images/image-name.png",
                        "width": 300,
                        "height": 300
                    }
                },
                "opacity": {
                    "value": 0.10422178395625899,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.6821448583331299,
                        "sync": true
                    }
                },
                "size": {
                    "value": 175,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 25,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 336.7165327817598,
                    "color": "#ffffff",
                    "opacity": 1,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 1,
                    "direction": "none",
                    "random": false,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": false,
                        "mode": "repulse"
                    },
                    "onclick": {
                        "enable": false,
                        "mode": "push"
                    }

                },
                "modes": {
                    "grab": {
                        "distance": 400,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        }, function() {
            //callback
        });
    });

});

[danbarbarito]

Any updates regarding this issue?