Particles Js's canvas is displaying at the very bottom of page

Question

I am using Vue 2 and Laravel for my website and am looking to integrate Particles Js however the particles canvas is displaying at the bottom of the page no matter what. From my understanding, it should be displayed inside of the div with an id of particles-js however it does not and even if the said div is not in the page it still shows at the bottom of the page.

I have tried different css classes to just try to move the canvas but nothing seems to work. I also tried to hard code the canvas where i want it to be but does not work like that.

    export default {
        layout: 'basic',
        mounted() {
            console.log('mounted');

            particlesJS('app', {

                "particles": {
                    "number": {
                        "value": 100,
                        "density": {
                            "enable": true,
                            "value_area": 500
                        }
                    },
                    "color": {
                        "value": "#5802ff"
                    },
                    "shape": {
                        "type": "circle",
                        "stroke": {
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        },
                        "image": {
                            "src": "img/github.svg",
                            "width": 100,
                            "height": 100
                        }
                    },
                    "opacity": {
                        "value": 0.5,
                        "random": false,
                        "anim": {
                            "enable": false,
                            "speed": 1,
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 3,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": "#9054ff",
                        "opacity": 0.4,
                        "width": 1
                    },
                    "move": {
                        "enable": true,
                        "speed": 2,
                        "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": true,
                            "mode": "grab"
                        },
                        "onclick": {
                            "enable": true,
                            "mode": "push"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 140,
                            "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
            });
        },

This is How I am implementing Particles Js with vue 2

I add <div id="particles-js"></div>

And it should have the canvas inside of that but it doesnt but only puts it at the bottom of the app div that defines the scope for vue

I want to be able to put it in the background at the top of the page

Answer 1

Looking at the documentation of partictlesJS the first argument to particles.load is a DOM id. In their example it is particles-js which is the id of the DOM element the canvas is rendered in as you correctly point out in your question.

However in the code sample you posted you write particlesJS('app', ... ) which explains why the canvas is appended to the app element. Just change app to the id of the element you want the canvas to be rendered in and it should work fine.