CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml5-canvas
TND
TND

Reputation: 291

Strange behavior with dimensions of canvas

So, I'm confused about a current problem, which thankfully is easy to demonstrate to you guys.

Here it is on JSFiddle:

Using the canvas: upper.height=$(document.body).height() - lower.height();

Using a substitute div: upper.height($(document.body).height() - lower.height());

As you can see, a small margin of a few pixels is placed after the canvas for some reason. It ends up creating a scrollbar, since it becomes 4 pixels taller than the viewport it's trying to fill. Why is this? I've set margin:0; and padding:0; for all elements.

Thanks so much!

Upvotes: 1

Views: 52

Answers (1)

SW4
SW4

Reputation: 71140

You need to set the canvas as a block element (a div is block level by default), it is inline by default which is why you are seeing the variation in behaviour:

Demo Fiddle

canvas{
    display:block
}

Upvotes: 3

Related Questions