Canvas height shrinks as width shrinks (~ *0.5) (Scale ratio?)

[afparsons]

Expected Behavior Canvas would responsively resize to fit window.

Actual Behavior Height shrinks to half of canvas width during resize. W:H scaling ratio appears to be set to 2:1.

Specifications Version: 2.1.0 Browsers: Firefox 57, Chrome 62 package.json:

"dependencies": { "canvas-particle-network": "^1.5.0", "material-ui": "^1.0.0-beta.21", "material-ui-icons": "^1.0.0-beta.17", "material-ui-search-bar": "^1.0.0-beta.3", "react": "^16.1.1", "react-dom": "^16.1.1", "react-particles-js": "^2.1.0", "react-scripts": "1.0.17", "react-tap-event-plugin": "^3.0.2" }

Possible Solution: Stackoverflow

The solution is likely relatively simple. I however don't understand how preventing the 2:1 scale ratio is implemented in the React component. Upon resolving I can add a note to the Readme.md

Edit: formatting

[EthanC]

Was a solution ever found for this? Also experiencing.

[ghost]

@afparsons @EthanC you need to add style in the Particles

style={{
              position: "fixed",
              top: 0,
              left: 0,
              width: "100%",
              height: "100%"
          }}

[begonaalvarezd]

@bichenkk Is it necessary to have that position fixed? I really cannot manage to solve this issue. I am trying to have particles wrapped in a div with a specific size, relative position, not fixed.

Under this situation, if I, for example, set the container div with 500px height and width...the resulted canvas has 250px height.

How to solve it?

Thanks!

[wufe]

@begonaalvarezd You can use

style={{
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
}}

Try this:

[wufe]

Answers given, closing.