Question

I’m using some script I found on Git that generates a snow effect. Somewhere in the code I have to set the width and the height of the canvas in which the snow is generated. I’m setting the canvas to the window full width / height :

canvas.width = $(window).width();
canvas.height = $(window).height();

But when rendered in the browser there are on both height and width some extra pixels adding scrollbars to the window. You can see the behavior here : Canvas ; I’m not quite sure why the width / height is calculated wrong or if there’s something else interfering with those calculations that it makes it bigger than the actual window width / height. Maybe someone has a different view of the behavior or encountered it before ?

Answer 1

The canvas element is displayed inline by default, you can read here about similar problem.

The solution is quite simple 🙂 Add following css code to the canvas element:
display: block;
and scrollbars should disappear.

---

old answer:
$(window).width() works properly but i don’t know why $(window).height() returns too large value. It cause also showing vertical scrollbar because earlier computed width don’t include the size of horizontal scrollbar.