examples/example_resizable_container_with_handle/shell.html

<!doctype html>
<html lang="EN-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>emscripten glfw</title>

  <style>

    #canvas-container {
      margin: 20px;
      width: 300px;
      height: 200px;
      position: relative;
      border: solid 2px black;
    }

    #canvas {
      margin: 0;
      padding: 0;
      display: block;
    }

    .handle {
      position: absolute;
      bottom: 0;
      right: 0;
      margin-bottom: 1px;
      margin-right: 1px;
      border-left: 20px solid transparent;
      border-bottom: 20px solid rgba(102, 102, 102, 0.5);
      width: 0;
      height: 0;
      cursor: nwse-resize;
      z-index: 1;
    }

    #canvas:focus {
      outline: none;
    }

    #canvas-button {
      text-align: center;
      padding-top: 1em;
    }
  </style>
</head>
<body>
<h4>Welcome to Resizable Container With Handle Example</h4>
<div id="canvas-container">
  <div id="canvas-handle" class="handle"></div>
  <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
</div>
<div id="canvas-button"><input id="fullscreen" type="button" name="fs" value="Fullscreen" onclick="Module.glfwRequestFullscreen('#canvas', false, true);"></div>
<h4>Help</h4>
<ul>
  <li>Use the handle to resize the window</li>
  <li>CTRL+Q to terminate</li>
  <li>CTRL+F or click the button for fullscreen</li>
</ul>
<script>
  var Module = {};
</script>
{{{ SCRIPT }}}
</body>
</html>