How to change canvas width and height when we use particles.js?

[N-Asadnajafi]

As I surfed the internet and couldn't find a clear solution, I decided to share the solution that I finally discovered :D Here is my solution:

1. import particles.js to your html file

2. open particles.js and search for the word 'canvas' , you'll find this line of code : "var canvas_el = document.createElement('canvas');"

3. look at the next lines, you can simply modify the width and height. As an example: canvas_el.style.width = "1920" + "px"; canvas_el.style.height = "1080" + "px";

I'd be appreciate any other solutions

[reginpv]

Hi @N-Asadnajafi ,

My solution is to use the callback function like so:

particlesJS.load('particles-js', '/vendors/particles.js-master/particles.json', function() {
      console.log('callback - particles.js config loaded');
      let el = document.querySelector(".particles-js-canvas-el"); 
      el.setAttribute("height", "300px");
});

Let me know how it worked for you.

[aditshinde]

I added a class to the particle-js div .particle-canvas{ height: 28.375vw !important; }

[nicofilizzola]

@reginpv I tried doing using the callback function as suggested but this happens when I repulse:

[AngeloSchulerPiletti]

Hey, what's up! So, I fixed my issue by changing the <div id="particles-js"> position to absolute and setting its height to 100%. The next step was to set its father's position to relative.

This solution assumes that your page is something like this:

<div id="father_container">
      <div id="particles-js">
      </div>
      <div id="page_content">
           // a lot of code
      </div>
</div>

#father_container{
      position: relative;
      height: 1000vh; //just for example
}
#particles-js{
       position: absolute;
       height: 100%;
       width: 100%;
  
       top: 0;

       background-color: black;
       background-size: cover;
       background-position: 50% 50%;
       background-repeat: no-repeat;
}
#page_content{
      position: static;
}

Let me know if it worked for you :octocat:

[acuccoder]

@AngeloSchulerPiletti That didn't work for me, but what I found was that it was the position: absolute; that was the problem. If it was added in, the particles-js div would disappear, and if it was removed, the div would reappear. All the others except background-color: black; did nothing; The background-color: black; would replace the particles-js background with a black one.