wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

Resizing the window results in canvas ballooning in size #87

Closed chrysb closed 5 years ago

chrysb commented 5 years ago

This library is awesome and it works smoothly. Until I resize the window, then the canvas jumps to 2400x4800. I've also had issue sizing the canvas, the values I pass into width and height seem to be ignored or misinterpreted.

This issue, though, is about what happens when I resize. The canvas blows up and performance halts to a crawl. Here are my properties:


<Particles
          width="700"
          height="200"
            params={{
              "particles": {
                "number": {
                  "value": 128,
                  "density": {
                    "enable": true,
                    "value_area": 800
                  }
                },
                "size": {
                  "value": 6,
                  "random": true,
                  "anim": {
                    "speed": 4,
                    "size_min": 4
                  }
                },
                opacity: {
                  "value": 0.3,
                  "random": true
                },
                "line_linked": {
                  "enable": false
                },
                "move": {
                  "random": true,
                  "speed": 0.8,
                  "direction": "top",
                  "out_mode": "out"
                },
                "shape": {
                  "type": [
                    "images"
                  ],
                  "images": [
                    {
                      "src": image,
                      "height": 76,
                      "width": 62
                    },
                    {
                      "src": image2,
                      "height": 40,
                      "width": 40
                    }
                  ]
                },
              }
            }} />```
chrysb commented 5 years ago

I believe I fixed this by adding css to size the canvas:

.mydiv canvas {
  width: 100%;
  height: 100%;
}