[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Re: [Public WebGL] Mysterious extra padding below canvas
- To: Mark Callow <firstname.lastname@example.org>
- Subject: Re: [Public WebGL] Mysterious extra padding below canvas
- From: "Gregg Tavares (wrk)" <email@example.com>
- Date: Thu, 11 Nov 2010 01:37:27 -0800
- Cc: public webgl <firstname.lastname@example.org>
- Dkim-signature: v=1; a=rsa-sha1; c=relaxed/relaxed; d=google.com; s=beta; t=1289468249; bh=YlI9Y+cU4oHfOjm8tceop34Lcr8=; h=MIME-Version:In-Reply-To:References:Date:Message-ID:Subject:From: To:Cc:Content-Type; b=XqB1nrL79hHuuQpRBV1u/KBfIYlwrPikQvvFvQyoyJH1nlCN5oELXsFAH5vj3R59N 2eWjGzDzygKwCPjlMKR+g==
- Dkim-signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=beta; h=domainkey-signature:mime-version:received:received:in-reply-to :references:date:message-id:subject:from:to:cc:content-type; bh=HyOxNME37zKbL5pqN7lUkiNSfgDlyswwJBu2sDC3/u8=; b=quwXbUab1FrGGA5T3wj4uMIMiHdHB1MYXsMmAVNgL3Oc/jkO9vUw9HsM4Xt//Dpf3s TcYqk06hJAFtnZ4jGaWQ==
- Domainkey-signature: a=rsa-sha1; c=nofws; d=google.com; s=beta; h=mime-version:in-reply-to:references:date:message-id:subject:from:to :cc:content-type; b=gb/rWQ67gnqwLacdSz0h7LWf7a3pey8XCmH1ZV4ySnMEieuwBtw8LI50qHQlPzVasp IdnChM+/3TP+oPeL76vA==
- In-reply-to: <4CDBA672.email@example.com>
- References: <4CDBA672.firstname.lastname@example.org>
- Sender: email@example.com
On Thu, Nov 11, 2010 at 12:16 AM, Mark Callow <firstname.lastname@example.org>
In my efforts to size a canvas to fill the browser window, I have
found the browsers are adding some mysterious padding below the
canvas element. I have created the attached simple show-gap.html
to illustrate the problem. It encloses the canvas in a
<div> element with a red border so you can clearly see the
space. The div's height is set to 100%. All padding and margins
and set to 0 as is the canvas border. The result is the same in
both Chrome & Firefox 4.
You need to tell the browser to use modern HTML. Change the first line
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
And the border issue will go away
Instead of doing the calculation myself, I tried setting the
width & height of the canvas to 100% in the canvas's style. In
this case the result differs between browsers with both
unsatisfactory. Firefox has a large white space below the canvas,
much larger than the gap show by the first example, and no
vertical scrollbar. Chrome fills the visible window with the
canvas and adds a scrollbar so you can scroll this mysterious
extra white space into view. The extra white space looks like the
same height as that in shown by the first example.
After more than an hour perusing css box information, I have
failed to find an answer. Can anyone tell me why this white space
is there, and how I can determine it's height so I compute my
canvas size accordingly. Or, even better, prevent the browsers
It has turned out to be absurdly difficult to fill the browser
window with my WebGL canvas.
If you want to fill the browser you need to tell it make the page fill the window. By default the page is as small as it can be made. In other words if all you had is a single line of text then the page is only 1 line high even if the browser window is much larger.
So, add this inside style section
Now change your canvas's style from being a fixed size
You don't need the gl.viewport call as the viewport defaults to the initial of the canvas.
Currently your backbuffer size is set to 500x500 pixels but it will be stretched to the entire page. If you want it always be the same size as it's displayed add
var canvas = document.getElementById('cv');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
gl.viewport(0, 0, canvas.width, canvas.height);