CODEWITHSUNDEEP
javascriptcsscanvasheightwidth
Roland
Roland

Reputation: 9701

Canvas width and height calculation is off

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 ?

Upvotes: 0

Views: 604

Answers (1)

rzymek
rzymek

Reputation: 876

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.

Upvotes: 1

Related Questions