0

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 ?

Roland
  • 9,321
  • 17
  • 79
  • 135

1 Answers1

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.

Community
  • 1
  • 1
rzymek
  • 866
  • 7
  • 20
  • Can you be more precise ? You're asking more questions instead of answering, sound more of an rhetorical answer :) – Roland Jan 01 '13 at 16:58
  • I still play with it and trying figure out the answer :) just something cause that height is larger by 15px in my browser that is actually is... – rzymek Jan 01 '13 at 17:02
  • @Roland, could you provide the feedback if my solution works for you, look at edited answer. – rzymek Jan 02 '13 at 09:58
  • It does work :) I tried positioning and overflow ( which also worked ) but I don't really like hacks :) Thanks for the solution :) – Roland Jan 02 '13 at 16:31