title: Canvas layout with JavaScript
body: <p>I want to do layout into a canvas with javascript. This code is full screen. 
  How do I get into canvas?</p>
  
  <p><img src="https://i.stack.imgur.com/8P68e.png" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".left.pane").resizable({
    handles: "e, w"
  });
  $(".right.pane").resizable({
    handles: "e, w"
  });
  $(".center.pane .inner .bottom").resizable({
    handles: "n, s"
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { 
         margin: 0; 
         padding: 0
       }
  }
  .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 20px;
      background-color: moccasin;  
  }
  .wrapper {
      position:absolute;
      top: 21px;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: fuchsia;
  }
  .inner-wrapper,
  .center.pane .inner {
      display: table;
      width: 100%;
      height: 100%;
  }
  .pane {
      display: table-cell;
  }
  .left.pane {
     background-color: olivedrab; 
  }
  .center.pane {
      background-color: lightblue;
  }
  .center.pane .inner .top,
  .center.pane .inner .bottom{
      display: table-row;  
  }
  .center.pane .inner .top {
      background-color: lightcoral;   
  }
  .center.pane .inner .bottom {   
      background-color: orange;
      height: 100%;
      width: 100%;
  }
  .right.pane {
      background-color: #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
     &lt;div class="inner-wrapper"&gt;
         &lt;div class="left pane"&gt;Left&lt;/div&gt;
         &lt;div class="center pane"&gt;
             &lt;div class="inner"&gt;
                 &lt;div class="top"&gt;Center top&lt;/div&gt;
                 &lt;div class="bottom"&gt;Center bottom&lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="right pane"&gt;Right&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>