width and height attributes

[hggaguilera]

I will like to remove the width and height attributes the canvas have since is taken more space than the one I need.

<canvas width="1898" height="950" style="width: 100%; height: auto;"></canvas>

I will like to remove the width that is set to 1898 and the height that is set to 950 and just live the inline style.

But no matter what I do I cannot achive it, any suggestions?

[wufe]

Did you try setting width, height or style props?

[hggaguilera]

This is the current code I have to set the properties.

And it keeps rendering this

<canvas width="1898" height="950" style="width: 100%; height: 100%;"></canvas>

[wufe]

The width and height attributes of the canvas are calculated by the canvas element offsetWidth and offsetHeight. If they are not correct it may be due to the width, height or style props set in the particles component. Try to remove the width={'100%'} height={'100%'} from the particles component and use only the style prop, or viceversa.

[hggaguilera]

I try to remove the width and height properties and only use the style prop and viceversa but it still not working, the attributes are still showing on the canvas.

This attributes change whenever I increase or reduce the screen size but in small devices does not take the whole screen and on laptops, for example, takes more space, what I'm trying to achieve is for the canvas to use the whole screen size on all devices so there is no scroll.

[hggaguilera]

I found a way to fix it, setting the two divs containing the canvas with a height of 100% and hiding the scroll bar on the main div.

[wufe]

Since it has been solved, I'm closing this issue.

[rpsinghcodes]

I want to set the particles as the background of my Header section but it's not woking it come in another div