Canvas width and height is always zero.

[Triyugi]

I am using react-particles-js in my file as:

<Particles params={{ particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: "#ffffff" }, shape: { type: "circle", stroke: { width: 0, color: "#000000" }, polygon: { nb_sides: 7 }, image: { src: "img/github.svg", width: 100, height: 100 } }, opacity: { value: 0.20844356791251797, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 4.008530152163807, random: true, anim: { enable: false, speed: 17.053621458328248, size_min: 39.791783402765915, sync: false } }, line_linked: { enable: true, distance: 128.27296486924183, color: "#ffffff", opacity: 0.24051180912982842, width: 1 }, move: { enable: true, speed: 6, direction: "none", random: true, 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" }, resize: true }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 280.1666382439641, size: 28.42270243054708, duration: 2, opacity: 0.2679854800594439, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }} />

But it always renders as:

<div><canvas style="width: 100%; height: 100%;" width="0" height="0"></canvas></div>

I want to set custom width and height. How it can be done?

[liuxuerong]

Did you import less?I found that when less was imported into my project, such a situation would occur, but I just found out the reason.If there is any plan, please let me know. import less from 'less';

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.