[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] Mysterious extra padding below canvas

On Thu, Nov 11, 2010 at 12:16 AM, Mark Callow <callow_mark@hicorp.co.jp> wrote:

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>


<!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 adding it.

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

html, body {
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 0px;
  margin: 0px;

Now change your canvas's style from being a fixed size 

canvas {
border: none;
        width: 100%;
        height: 100%;

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

document. {
   var canvas = document.getElementById('cv');
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
gl.viewport(0, 0, canvas.width, canvas.height);