12.11 - Overlays¶

Overlays Using CSS Properties¶

HTML elements have a “stack ordering” based on their CSS (Cascading Style Sheets) z-index property. Elements are rendered to a web page based on their z-index ordering – from smallest to largest. This is identical to the “painter’s algorithm” described in lesson 12.2. Elements rendered later in the process of creating a web page over-write (or blend) any previously rendered elements. Using the z-index property, 3D graphics can be rendered behind or in-front-of other HTML elements.

The z-index property only affects elements that are rendered on top of each other. Therefore, the z-index ordering only works on elements whose position property is absolute, relative, or fixed, which are defined as follows:

• absolute: The element is positioned relative to its first positioned (not static) ancestor element.
• relative: The element is positioned relative to its normal position.
• fixed: The element is positioned relative to the browser window.

The z-index property has no impact on an HTML element if its position property is static, initial, or inherit, which are defined as follows,

• static: Elements render in order, as they appear in the document flow. (Default)
• initial: Use its default value.
• inherit: Inherits this property from its parent element.

The examples in this lesson are created by setting appropriate position, width, height, top, bottom, left and right properties to make elements overlap and then setting the rendering order using the z-index property. The alpha component of the background color is also used to implement transparency.

Positioning HTML elements can be very tricky. The examples in this lesson use this strategy:

• Create a div “container” to hold the overlapping elements. Set its position property to relative and its height property to the the total height of the overlapping HTML elements. This allows elements after this “container” to follow the normal flow of the web page (which is left-to-right, top-to-bottom).
• Create the overlapping elements and make their position property be absolute or relative. Set each element’s size (width and height) and its relative location using two of the properties: top, bottom, left and right. (For example, to position an element in the upper-right corner of an area, use the top and right properties.)

To investigate the details of the examples in this lesson, right-click over a HTML element and select “Inspect”. The browser’s “development tools” will display the HTML source code and the CSS settings for the element.

3D Graphics Behind Text¶

To create 3D graphics behind HTML elements, position a canvas and the HTML elements in the same relative position on a web page. In addition, assign the canvas a z-index value that is less than the HTML element’s z-index value. Here are a set of example CSS definitions that define the example below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

#graphics_under {        /* The "container" <div>. */
  position: relative;
  height: 400px;
}

#W1_text {               /* The "front" element */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  z-index: 1;
}

#W1_canvas {             /* The "back" element. */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  z-index: 0;
}

The HTML code looks like this, where the inner <div> and the canvas are taking up the same area of the web page:

1
2
3
4
5
6
7
8
9

<div id="graphics_under">
  <div id="W1_text">
    The following description is from ...
  </div>

  <canvas id="W1_canvas">
    Please use a browser that supports "canvas"
  </canvas>
</div>

3D Graphics in Front of Text¶

To render 3D graphics over the top of HTML elements, change the z-index property of the canvas to have the largest z-index value of the overlapping elements. This causes the canvas to be rendered last, thus overwriting (or blending with) any previous rendering at that location on the web page. Use an alpha value of 0.0 for the canvas’ background color to allow the “back elements” to be visible.

Overlapping Canvas Elements¶

A canvas element can be overlaid on top of other canvas elements. For example, the layout of a game might desire a small “world map” in the corner of a larger “game play” window. The CSS definitions for overlapping canvas elements might look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#overlapping_canvas {   /* The "container" div. */
  position: relative;
  height: 400px;
  width: 400px;
}

#large_canvas {      /* The "main" canvas */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  z-index: 0;
  background: lightgray;
}

#small_canvas {      /* The upper-right corner canvas. */
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  z-index: 1;
  background: lightgreen;
}

Full Screen Rendering¶

HTML elements can be rendered in full screen mode, but as of early 2018, the interface to the functionality has not been standardized. Each browser uses different naming conventions. To make full screen mode function correctly for all browsers, the code must include all possible naming conventions – which makes the code seem more complex than it really is. (As of early 2018, jQuery has not standardized full screen mode functionality either.)

The proposed standard for full screen mode can be found at Fullscreen API.

Any HTML element can be requested to enter full screen mode. For 3D graphics, a canvas element would typically request full screen mode.

Fullscreen requests must be called from within an event handler. If they are called anywhere else they will be denied. This means that a user must initiate fullscreen mode by some user action. A user can always exit from fullscreen mode by hitting the escape (ESC) key.

When full screen mode is initiated or exited, the size of the canvas element must be updated accordingly. A callback function must be registered for any fullscreenchange events to make the needed size changes. Note that in the following code example only one of the on function calls will succeed based on which browser the code is executing on.

$( '#' + canvas_id ).on(       'fullscreenchange', self.onFullScreenChange )
                    .on( 'webkitfullscreenchange', self.onFullScreenChange )
                    .on(    'mozfullscreenchange', self.onFullScreenChange )
                    .on(     'MSFullscreenChange', self.onFullScreenChange );

The event handler must recognize the current screen mode and then take appropriate actions. Here is an example event handler:

/** ---------------------------------------------------------------------
 * Process "fullscreenchange" events.
 * @param event {x.Event} event that triggered a "fullscreenchange" event.
 */
self.onFullScreenChange = function (event) {

  if (document.fullscreenElement ||
      document.webkitIsFullScreen ||
      document.mozFullScreen ||
      document.msFullscreenElement) {
    // The document is in full screen mode.
    self.updateCanvasSize( screen.width, screen.height );
  } else {
    // The document is NOT in full screen mode.
    self.updateCanvasSize(400, 400);
  }
  scene.render();
};

To enter full screen mode a user event must initiate the action. Here is a typical function that starts full screen mode:

/** ---------------------------------------------------------------------
 * Initiate full screen mode.
 * @param id {string} The ID of the element that will be made full screen.
 */
self.startFullScreenMode = function (id) {

  // Get the element that will take up the entire screen
  let element = document.getElementById(id);

  // Make sure the element is allowed to go full screen.
  if (!element.fullscreenElement &&
      !element.mozFullScreenElement &&
      !element.webkitFullscreenElement &&
      !element.msFullscreenElement) {

    // Enter full screen mode
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    window.console.log("The element " + id + " can't go into full screen mode.");
  }
};

The startFullScreenMode function will become much simpler and cleaner when all of the browsers standardize on a single naming convention (or jQuery adds support for full screen mode.)

<canvas width="100" height="100" style="width:200px; height:200px;"> </canvas>

/** ---------------------------------------------------------------------
 * Reset the size of a canvas after a full screen mode event.
 * @param new_width {Number} The new width for the canvas element.
 * @param new_height {Number} The new height for the canvas element.
 */
self.updateCanvasSize = function (new_width, new_height) {

  // Change the CSS size of the canvas.
  $('#W4_canvas').css('width', new_width).css('height', new_height);

  // Re-size the WebGL draw buffer for the canvas.
  let canvas = document.getElementById('W4_canvas');
  canvas.width  = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
};

Glossary¶

overlay

The rendering of more than one element in the same location on a web page.

stack ordering

The back-to-front ordering of a set of overlaid HTML elements.

z-index

A value that specifies the position of an element in a “stack ordering”. The ordering is from smallest to largest. The element with the largest z-index is rendered last.

full screen mode

Render an HTML element (and all of its children) to a window that covers the entire screen. All window borders and title bars disappear. You can exit full screen mode by hitting the ESC key.

Self Assessment¶