docs/demo/canvas-023.html

<!DOCTYPE html>

<html>
<head>
  <title>Demo Canvas 023</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="../docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page_wrapper">
            <div id="jump_page">
              
                
                <a class="source" href="canvas-001.html">
                  ./demo/canvas-001.js
                </a>
              
                
                <a class="source" href="canvas-002.html">
                  ./demo/canvas-002.js
                </a>
              
                
                <a class="source" href="canvas-003.html">
                  ./demo/canvas-003.js
                </a>
              
                
                <a class="source" href="canvas-004.html">
                  ./demo/canvas-004.js
                </a>
              
                
                <a class="source" href="canvas-005.html">
                  ./demo/canvas-005.js
                </a>
              
                
                <a class="source" href="canvas-006.html">
                  ./demo/canvas-006.js
                </a>
              
                
                <a class="source" href="canvas-007.html">
                  ./demo/canvas-007.js
                </a>
              
                
                <a class="source" href="canvas-008.html">
                  ./demo/canvas-008.js
                </a>
              
                
                <a class="source" href="canvas-009.html">
                  ./demo/canvas-009.js
                </a>
              
                
                <a class="source" href="canvas-010.html">
                  ./demo/canvas-010.js
                </a>
              
                
                <a class="source" href="canvas-011.html">
                  ./demo/canvas-011.js
                </a>
              
                
                <a class="source" href="canvas-012.html">
                  ./demo/canvas-012.js
                </a>
              
                
                <a class="source" href="canvas-013.html">
                  ./demo/canvas-013.js
                </a>
              
                
                <a class="source" href="canvas-014.html">
                  ./demo/canvas-014.js
                </a>
              
                
                <a class="source" href="canvas-015.html">
                  ./demo/canvas-015.js
                </a>
              
                
                <a class="source" href="canvas-016.html">
                  ./demo/canvas-016.js
                </a>
              
                
                <a class="source" href="canvas-017.html">
                  ./demo/canvas-017.js
                </a>
              
                
                <a class="source" href="canvas-018.html">
                  ./demo/canvas-018.js
                </a>
              
                
                <a class="source" href="canvas-019.html">
                  ./demo/canvas-019.js
                </a>
              
                
                <a class="source" href="canvas-020.html">
                  ./demo/canvas-020.js
                </a>
              
                
                <a class="source" href="canvas-021.html">
                  ./demo/canvas-021.js
                </a>
              
                
                <a class="source" href="canvas-022.html">
                  ./demo/canvas-022.js
                </a>
              
                
                <a class="source" href="canvas-023.html">
                  ./demo/canvas-023.js
                </a>
              
                
                <a class="source" href="canvas-024.html">
                  ./demo/canvas-024.js
                </a>
              
                
                <a class="source" href="canvas-025.html">
                  ./demo/canvas-025.js
                </a>
              
                
                <a class="source" href="canvas-026.html">
                  ./demo/canvas-026.js
                </a>
              
                
                <a class="source" href="canvas-027.html">
                  ./demo/canvas-027.js
                </a>
              
                
                <a class="source" href="canvas-028.html">
                  ./demo/canvas-028.js
                </a>
              
                
                <a class="source" href="canvas-029.html">
                  ./demo/canvas-029.js
                </a>
              
                
                <a class="source" href="canvas-030.html">
                  ./demo/canvas-030.js
                </a>
              
                
                <a class="source" href="canvas-031.html">
                  ./demo/canvas-031.js
                </a>
              
                
                <a class="source" href="canvas-032.html">
                  ./demo/canvas-032.js
                </a>
              
                
                <a class="source" href="canvas-033.html">
                  ./demo/canvas-033.js
                </a>
              
                
                <a class="source" href="canvas-034.html">
                  ./demo/canvas-034.js
                </a>
              
                
                <a class="source" href="canvas-035.html">
                  ./demo/canvas-035.js
                </a>
              
                
                <a class="source" href="canvas-036.html">
                  ./demo/canvas-036.js
                </a>
              
                
                <a class="source" href="canvas-037.html">
                  ./demo/canvas-037.js
                </a>
              
                
                <a class="source" href="canvas-038.html">
                  ./demo/canvas-038.js
                </a>
              
                
                <a class="source" href="canvas-039.html">
                  ./demo/canvas-039.js
                </a>
              
                
                <a class="source" href="canvas-040.html">
                  ./demo/canvas-040.js
                </a>
              
                
                <a class="source" href="canvas-041.html">
                  ./demo/canvas-041.js
                </a>
              
                
                <a class="source" href="canvas-042.html">
                  ./demo/canvas-042.js
                </a>
              
                
                <a class="source" href="canvas-043.html">
                  ./demo/canvas-043.js
                </a>
              
                
                <a class="source" href="canvas-044.html">
                  ./demo/canvas-044.js
                </a>
              
                
                <a class="source" href="canvas-045.html">
                  ./demo/canvas-045.js
                </a>
              
                
                <a class="source" href="canvas-046.html">
                  ./demo/canvas-046.js
                </a>
              
                
                <a class="source" href="canvas-047.html">
                  ./demo/canvas-047.js
                </a>
              
                
                <a class="source" href="canvas-048.html">
                  ./demo/canvas-048.js
                </a>
              
                
                <a class="source" href="canvas-049.html">
                  ./demo/canvas-049.js
                </a>
              
                
                <a class="source" href="canvas-050.html">
                  ./demo/canvas-050.js
                </a>
              
                
                <a class="source" href="canvas-051.html">
                  ./demo/canvas-051.js
                </a>
              
                
                <a class="source" href="canvas-052.html">
                  ./demo/canvas-052.js
                </a>
              
                
                <a class="source" href="canvas-053.html">
                  ./demo/canvas-053.js
                </a>
              
                
                <a class="source" href="canvas-054.html">
                  ./demo/canvas-054.js
                </a>
              
                
                <a class="source" href="canvas-055.html">
                  ./demo/canvas-055.js
                </a>
              
                
                <a class="source" href="canvas-056.html">
                  ./demo/canvas-056.js
                </a>
              
                
                <a class="source" href="canvas-057.html">
                  ./demo/canvas-057.js
                </a>
              
                
                <a class="source" href="canvas-058.html">
                  ./demo/canvas-058.js
                </a>
              
                
                <a class="source" href="canvas-059.html">
                  ./demo/canvas-059.js
                </a>
              
                
                <a class="source" href="canvas-060.html">
                  ./demo/canvas-060.js
                </a>
              
                
                <a class="source" href="canvas-201.html">
                  ./demo/canvas-201.js
                </a>
              
                
                <a class="source" href="canvas-202.html">
                  ./demo/canvas-202.js
                </a>
              
                
                <a class="source" href="canvas-203.html">
                  ./demo/canvas-203.js
                </a>
              
                
                <a class="source" href="canvas-204.html">
                  ./demo/canvas-204.js
                </a>
              
                
                <a class="source" href="canvas-205.html">
                  ./demo/canvas-205.js
                </a>
              
                
                <a class="source" href="canvas-206.html">
                  ./demo/canvas-206.js
                </a>
              
                
                <a class="source" href="canvas-207.html">
                  ./demo/canvas-207.js
                </a>
              
                
                <a class="source" href="canvas-208.html">
                  ./demo/canvas-208.js
                </a>
              
                
                <a class="source" href="canvas-209.html">
                  ./demo/canvas-209.js
                </a>
              
                
                <a class="source" href="canvas-210.html">
                  ./demo/canvas-210.js
                </a>
              
                
                <a class="source" href="canvas-211.html">
                  ./demo/canvas-211.js
                </a>
              
                
                <a class="source" href="canvas-212.html">
                  ./demo/canvas-212.js
                </a>
              
                
                <a class="source" href="delaunator-001.html">
                  ./demo/delaunator-001.js
                </a>
              
                
                <a class="source" href="delaunator-002.html">
                  ./demo/delaunator-002.js
                </a>
              
                
                <a class="source" href="dom-001.html">
                  ./demo/dom-001.js
                </a>
              
                
                <a class="source" href="dom-002.html">
                  ./demo/dom-002.js
                </a>
              
                
                <a class="source" href="dom-003.html">
                  ./demo/dom-003.js
                </a>
              
                
                <a class="source" href="dom-004.html">
                  ./demo/dom-004.js
                </a>
              
                
                <a class="source" href="dom-005.html">
                  ./demo/dom-005.js
                </a>
              
                
                <a class="source" href="dom-006.html">
                  ./demo/dom-006.js
                </a>
              
                
                <a class="source" href="dom-007.html">
                  ./demo/dom-007.js
                </a>
              
                
                <a class="source" href="dom-008.html">
                  ./demo/dom-008.js
                </a>
              
                
                <a class="source" href="dom-009.html">
                  ./demo/dom-009.js
                </a>
              
                
                <a class="source" href="dom-010.html">
                  ./demo/dom-010.js
                </a>
              
                
                <a class="source" href="dom-011.html">
                  ./demo/dom-011.js
                </a>
              
                
                <a class="source" href="dom-012.html">
                  ./demo/dom-012.js
                </a>
              
                
                <a class="source" href="dom-013.html">
                  ./demo/dom-013.js
                </a>
              
                
                <a class="source" href="dom-015.html">
                  ./demo/dom-015.js
                </a>
              
                
                <a class="source" href="dom-016.html">
                  ./demo/dom-016.js
                </a>
              
                
                <a class="source" href="dom-017.html">
                  ./demo/dom-017.js
                </a>
              
                
                <a class="source" href="dom-018.html">
                  ./demo/dom-018.js
                </a>
              
                
                <a class="source" href="dom-019.html">
                  ./demo/dom-019.js
                </a>
              
                
                <a class="source" href="dom-020.html">
                  ./demo/dom-020.js
                </a>
              
                
                <a class="source" href="dom-021.html">
                  ./demo/dom-021.js
                </a>
              
                
                <a class="source" href="filters-001.html">
                  ./demo/filters-001.js
                </a>
              
                
                <a class="source" href="filters-002.html">
                  ./demo/filters-002.js
                </a>
              
                
                <a class="source" href="filters-002a.html">
                  ./demo/filters-002a.js
                </a>
              
                
                <a class="source" href="filters-003.html">
                  ./demo/filters-003.js
                </a>
              
                
                <a class="source" href="filters-004.html">
                  ./demo/filters-004.js
                </a>
              
                
                <a class="source" href="filters-005.html">
                  ./demo/filters-005.js
                </a>
              
                
                <a class="source" href="filters-006.html">
                  ./demo/filters-006.js
                </a>
              
                
                <a class="source" href="filters-007.html">
                  ./demo/filters-007.js
                </a>
              
                
                <a class="source" href="filters-008.html">
                  ./demo/filters-008.js
                </a>
              
                
                <a class="source" href="filters-009.html">
                  ./demo/filters-009.js
                </a>
              
                
                <a class="source" href="filters-010.html">
                  ./demo/filters-010.js
                </a>
              
                
                <a class="source" href="filters-011.html">
                  ./demo/filters-011.js
                </a>
              
                
                <a class="source" href="filters-012.html">
                  ./demo/filters-012.js
                </a>
              
                
                <a class="source" href="filters-013.html">
                  ./demo/filters-013.js
                </a>
              
                
                <a class="source" href="filters-014.html">
                  ./demo/filters-014.js
                </a>
              
                
                <a class="source" href="filters-015.html">
                  ./demo/filters-015.js
                </a>
              
                
                <a class="source" href="filters-016.html">
                  ./demo/filters-016.js
                </a>
              
                
                <a class="source" href="filters-017.html">
                  ./demo/filters-017.js
                </a>
              
                
                <a class="source" href="filters-018.html">
                  ./demo/filters-018.js
                </a>
              
                
                <a class="source" href="filters-019.html">
                  ./demo/filters-019.js
                </a>
              
                
                <a class="source" href="filters-020.html">
                  ./demo/filters-020.js
                </a>
              
                
                <a class="source" href="filters-021.html">
                  ./demo/filters-021.js
                </a>
              
                
                <a class="source" href="filters-022.html">
                  ./demo/filters-022.js
                </a>
              
                
                <a class="source" href="filters-023.html">
                  ./demo/filters-023.js
                </a>
              
                
                <a class="source" href="filters-024.html">
                  ./demo/filters-024.js
                </a>
              
                
                <a class="source" href="filters-025.html">
                  ./demo/filters-025.js
                </a>
              
                
                <a class="source" href="filters-026.html">
                  ./demo/filters-026.js
                </a>
              
                
                <a class="source" href="filters-027.html">
                  ./demo/filters-027.js
                </a>
              
                
                <a class="source" href="filters-028.html">
                  ./demo/filters-028.js
                </a>
              
                
                <a class="source" href="filters-029.html">
                  ./demo/filters-029.js
                </a>
              
                
                <a class="source" href="filters-030.html">
                  ./demo/filters-030.js
                </a>
              
                
                <a class="source" href="filters-031.html">
                  ./demo/filters-031.js
                </a>
              
                
                <a class="source" href="filters-032.html">
                  ./demo/filters-032.js
                </a>
              
                
                <a class="source" href="filters-101.html">
                  ./demo/filters-101.js
                </a>
              
                
                <a class="source" href="filters-102.html">
                  ./demo/filters-102.js
                </a>
              
                
                <a class="source" href="filters-103.html">
                  ./demo/filters-103.js
                </a>
              
                
                <a class="source" href="filters-104.html">
                  ./demo/filters-104.js
                </a>
              
                
                <a class="source" href="filters-105.html">
                  ./demo/filters-105.js
                </a>
              
                
                <a class="source" href="filters-501.html">
                  ./demo/filters-501.js
                </a>
              
                
                <a class="source" href="filters-502.html">
                  ./demo/filters-502.js
                </a>
              
                
                <a class="source" href="filters-503.html">
                  ./demo/filters-503.js
                </a>
              
                
                <a class="source" href="filters-504.html">
                  ./demo/filters-504.js
                </a>
              
                
                <a class="source" href="filters-505.html">
                  ./demo/filters-505.js
                </a>
              
                
                <a class="source" href="mediapipe-001.html">
                  ./demo/mediapipe-001.js
                </a>
              
                
                <a class="source" href="mediapipe-002.html">
                  ./demo/mediapipe-002.js
                </a>
              
                
                <a class="source" href="mediapipe-003.html">
                  ./demo/mediapipe-003.js
                </a>
              
                
                <a class="source" href="modules-001.html">
                  ./demo/modules-001.js
                </a>
              
                
                <a class="source" href="modules-002.html">
                  ./demo/modules-002.js
                </a>
              
                
                <a class="source" href="modules-003.html">
                  ./demo/modules-003.js
                </a>
              
                
                <a class="source" href="modules-004.html">
                  ./demo/modules-004.js
                </a>
              
                
                <a class="source" href="modules-005.html">
                  ./demo/modules-005.js
                </a>
              
                
                <a class="source" href="modules-006.html">
                  ./demo/modules-006.js
                </a>
              
                
                <a class="source" href="packets-001.html">
                  ./demo/packets-001.js
                </a>
              
                
                <a class="source" href="packets-002.html">
                  ./demo/packets-002.js
                </a>
              
                
                <a class="source" href="particles-001.html">
                  ./demo/particles-001.js
                </a>
              
                
                <a class="source" href="particles-002.html">
                  ./demo/particles-002.js
                </a>
              
                
                <a class="source" href="particles-003.html">
                  ./demo/particles-003.js
                </a>
              
                
                <a class="source" href="particles-004.html">
                  ./demo/particles-004.js
                </a>
              
                
                <a class="source" href="particles-005.html">
                  ./demo/particles-005.js
                </a>
              
                
                <a class="source" href="particles-006.html">
                  ./demo/particles-006.js
                </a>
              
                
                <a class="source" href="particles-007.html">
                  ./demo/particles-007.js
                </a>
              
                
                <a class="source" href="particles-008.html">
                  ./demo/particles-008.js
                </a>
              
                
                <a class="source" href="particles-009.html">
                  ./demo/particles-009.js
                </a>
              
                
                <a class="source" href="particles-010.html">
                  ./demo/particles-010.js
                </a>
              
                
                <a class="source" href="particles-011.html">
                  ./demo/particles-011.js
                </a>
              
                
                <a class="source" href="particles-012.html">
                  ./demo/particles-012.js
                </a>
              
                
                <a class="source" href="particles-013.html">
                  ./demo/particles-013.js
                </a>
              
                
                <a class="source" href="particles-014.html">
                  ./demo/particles-014.js
                </a>
              
                
                <a class="source" href="particles-015.html">
                  ./demo/particles-015.js
                </a>
              
                
                <a class="source" href="particles-016.html">
                  ./demo/particles-016.js
                </a>
              
                
                <a class="source" href="snippets-001.html">
                  ./demo/snippets-001.js
                </a>
              
                
                <a class="source" href="snippets-002.html">
                  ./demo/snippets-002.js
                </a>
              
                
                <a class="source" href="snippets-003.html">
                  ./demo/snippets-003.js
                </a>
              
                
                <a class="source" href="snippets-004.html">
                  ./demo/snippets-004.js
                </a>
              
                
                <a class="source" href="snippets-005.html">
                  ./demo/snippets-005.js
                </a>
              
                
                <a class="source" href="snippets-006.html">
                  ./demo/snippets-006.js
                </a>
              
                
                <a class="source" href="tensorflow-001.html">
                  ./demo/tensorflow-001.js
                </a>
              
                
                <a class="source" href="tensorflow-002.html">
                  ./demo/tensorflow-002.js
                </a>
              
                
                <a class="source" href="utilities.html">
                  ./demo/utilities.js
                </a>
              
            </div>
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-1">&#x00a7;</a>
              </div>
              <h1 id="demo-canvas-023">Demo Canvas 023</h1>
<p>Grid entity - using picture-based assets (image, video, sprite)</p>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-2">&#x00a7;</a>
              </div>
              <p><a href="../../demo/canvas-023.html">Run code</a></p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../source/scrawl.js&#x27;</span>

<span class="hljs-keyword">import</span> { reportSpeed, initializeDomInputs } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./utilities.js&#x27;</span>;</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-3">&#x00a7;</a>
              </div>
              <h4 id="scene-setup">Scene setup</h4>
<p>Get a handle to the Canvas wrapper</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> canvas = scrawl.<span class="hljs-title function_">findCanvas</span>(<span class="hljs-string">&#x27;mycanvas&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-4">&#x00a7;</a>
              </div>
              <p>Import assets</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">importDomVideo</span>(<span class="hljs-string">&#x27;.myvideo&#x27;</span>);
scrawl.<span class="hljs-title function_">importDomImage</span>(<span class="hljs-string">&#x27;.flowers&#x27;</span>);
scrawl.<span class="hljs-title function_">importSprite</span>(<span class="hljs-string">&#x27;img/cat-sprite.png&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-5">&#x00a7;</a>
              </div>
              <p>Namespacing boilerplate</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> namespace = canvas.<span class="hljs-property">name</span>;
<span class="hljs-keyword">const</span> <span class="hljs-title function_">name</span> = (<span class="hljs-params">n</span>) =&gt; <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${n}</span>`</span>;</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-6">&#x00a7;</a>
              </div>
              <p>Create the picture entitys</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">makePicture</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;myFlower&#x27;</span>),
    <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;iris&#x27;</span>,

    <span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;fill&#x27;</span>,

    <span class="hljs-attr">width</span>: <span class="hljs-string">&#x27;100%&#x27;</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-string">&#x27;100%&#x27;</span>,

    <span class="hljs-attr">copyWidth</span>: <span class="hljs-number">200</span>,
    <span class="hljs-attr">copyHeight</span>: <span class="hljs-number">200</span>,
    <span class="hljs-attr">copyStartX</span>: <span class="hljs-number">100</span>,
    <span class="hljs-attr">copyStartY</span>: <span class="hljs-number">100</span>,
});

<span class="hljs-keyword">const</span> viddyOne = scrawl.<span class="hljs-title function_">makePicture</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;first-video&#x27;</span>),
    <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;waves&#x27;</span>,

    <span class="hljs-attr">width</span>: <span class="hljs-string">&#x27;100%&#x27;</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-string">&#x27;100%&#x27;</span>,

    <span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;fill&#x27;</span>,

    <span class="hljs-attr">copyWidth</span>: <span class="hljs-number">200</span>,
    <span class="hljs-attr">copyHeight</span>: <span class="hljs-number">200</span>,
    <span class="hljs-attr">copyStartX</span>: <span class="hljs-number">100</span>,
    <span class="hljs-attr">copyStartY</span>: <span class="hljs-number">100</span>,
});

scrawl.<span class="hljs-title function_">makePicture</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;walking-cat&#x27;</span>),
    <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;cat-sprite&#x27;</span>,
    <span class="hljs-attr">spriteTrack</span>: <span class="hljs-string">&#x27;walk&#x27;</span>,
    <span class="hljs-attr">spriteFrameDuration</span>: <span class="hljs-number">100</span>,

    <span class="hljs-attr">width</span>: <span class="hljs-string">&#x27;100%&#x27;</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-string">&#x27;100%&#x27;</span>,

    <span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;fill&#x27;</span>,

}).<span class="hljs-title function_">playSprite</span>();</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-7">&#x00a7;</a>
              </div>
              <p>Assign pictures to <code>gridSource</code> objects</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> imageGrid = {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;gridPicture&#x27;</span>,
    <span class="hljs-attr">source</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;myFlower&#x27;</span>),
};

<span class="hljs-keyword">const</span> imageTile = {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;tilePicture&#x27;</span>,
    <span class="hljs-attr">source</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;myFlower&#x27;</span>),
};

<span class="hljs-keyword">const</span> videoGrid = {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;gridPicture&#x27;</span>,
    <span class="hljs-attr">source</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;first-video&#x27;</span>),
};

<span class="hljs-keyword">const</span> videoTile = {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;tilePicture&#x27;</span>,
    <span class="hljs-attr">source</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;first-video&#x27;</span>),
};

<span class="hljs-keyword">const</span> spriteGrid = {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;gridPicture&#x27;</span>,
    <span class="hljs-attr">source</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;walking-cat&#x27;</span>),
};

<span class="hljs-keyword">const</span> spriteTile = {
    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;tilePicture&#x27;</span>,
    <span class="hljs-attr">source</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;walking-cat&#x27;</span>),
};</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-8">&#x00a7;</a>
              </div>
              <p>Create the Grid entity</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> myGrid = scrawl.<span class="hljs-title function_">makeGrid</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;test-grid&#x27;</span>),

    <span class="hljs-attr">startX</span>: <span class="hljs-string">&#x27;center&#x27;</span>,
    <span class="hljs-attr">startY</span>: <span class="hljs-string">&#x27;center&#x27;</span>,

    <span class="hljs-attr">handleX</span>: <span class="hljs-string">&#x27;center&#x27;</span>,
    <span class="hljs-attr">handleY</span>: <span class="hljs-string">&#x27;center&#x27;</span>,

    <span class="hljs-attr">width</span>: <span class="hljs-number">300</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">200</span>,

    <span class="hljs-attr">columns</span>: <span class="hljs-number">6</span>,
    <span class="hljs-attr">rows</span>: <span class="hljs-number">6</span>,

    <span class="hljs-attr">tileSources</span>: [imageGrid, imageTile]
});</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-9">&#x00a7;</a>
              </div>
              <h4 id="scene-animation">Scene animation</h4>
<p>Function to track mouse movement across the Grid</p>
<ul>
<li>if the pointer is over a Grid tile, it will show the Grid’s highlight fill (tile source 1)</li>
<li>other Grid tiles will show the Grid’s base fill (tile source 0)</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> hitReport = <span class="hljs-string">&#x27;&#x27;</span>;
<span class="hljs-keyword">const</span> <span class="hljs-title function_">checkHitTiles</span> = (<span class="hljs-params"></span>) =&gt; {

    <span class="hljs-keyword">const</span> hits = myGrid.<span class="hljs-title function_">checkHit</span>(canvas.<span class="hljs-property">here</span>);

    myGrid.<span class="hljs-title function_">setAllTilesTo</span>(<span class="hljs-number">0</span>);

    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> hits !== <span class="hljs-string">&#x27;boolean&#x27;</span> &amp;&amp; hits) {

        myGrid.<span class="hljs-title function_">setTilesTo</span>(hits.<span class="hljs-property">tiles</span>, <span class="hljs-number">1</span>);
        hitReport = <span class="hljs-string">`Hits - x: <span class="hljs-subst">${hits.x}</span>, y: <span class="hljs-subst">${hits.y}</span>, tiles: <span class="hljs-subst">${hits.tiles.join(<span class="hljs-string">&#x27;, &#x27;</span>)}</span>`</span>;
    }
    <span class="hljs-keyword">else</span> hitReport = <span class="hljs-string">&#x27;Hits - none reported&#x27;</span>;
};</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-10">&#x00a7;</a>
              </div>
              <p>Function to display frames-per-second data, and other information relevant to the demo</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> report = <span class="hljs-title function_">reportSpeed</span>(<span class="hljs-string">&#x27;#reportmessage&#x27;</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {

    <span class="hljs-keyword">const</span> [startX, startY] = myGrid.<span class="hljs-property">start</span>;
    <span class="hljs-keyword">const</span> [handleX, handleY] = myGrid.<span class="hljs-property">handle</span>;
    <span class="hljs-keyword">const</span> [offsetX, offsetY] = myGrid.<span class="hljs-property">offset</span>;
    <span class="hljs-keyword">const</span> [width, height] = myGrid.<span class="hljs-property">dimensions</span>;

    <span class="hljs-keyword">const</span> here = canvas.<span class="hljs-property">here</span>;

    <span class="hljs-keyword">const</span> {roll, scale, columns, rows, columnGutterWidth, rowGutterWidth} = myGrid;

    <span class="hljs-keyword">return</span> <span class="hljs-string">`    Grid - columns: <span class="hljs-subst">${columns.toFixed(<span class="hljs-number">0</span>)}</span>; rows: <span class="hljs-subst">${rows.toFixed(<span class="hljs-number">0</span>)}</span>
    Grid dimensions - width: <span class="hljs-subst">${width}</span>; height: <span class="hljs-subst">${height}</span>
    Grid gutter widths - column: <span class="hljs-subst">${columnGutterWidth.toFixed(<span class="hljs-number">0</span>)}</span>; row: <span class="hljs-subst">${rowGutterWidth.toFixed(<span class="hljs-number">0</span>)}</span>
    Start - x: <span class="hljs-subst">${startX}</span>, y: <span class="hljs-subst">${startY}</span>
    Handle - x: <span class="hljs-subst">${handleX}</span>, y: <span class="hljs-subst">${handleY}</span>
    Offset - x: <span class="hljs-subst">${offsetX}</span>, y: <span class="hljs-subst">${offsetY}</span>
    Roll: <span class="hljs-subst">${roll}</span>; Scale: <span class="hljs-subst">${scale}</span>
    canvas.here - x: <span class="hljs-subst">${here.x}</span>, y: <span class="hljs-subst">${here.y}</span>; <span class="hljs-subst">${hitReport}</span>`</span>;
});</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-11">&#x00a7;</a>
              </div>
              <p>Create the Display cycle animation</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">makeRender</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-title function_">name</span>(<span class="hljs-string">&#x27;animation&#x27;</span>),
    <span class="hljs-attr">target</span>: canvas,
    <span class="hljs-attr">commence</span>: checkHitTiles,
    <span class="hljs-attr">afterShow</span>: report,
});</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-12">&#x00a7;</a>
              </div>
              <h4 id="user-interaction">User interaction</h4>
<p>Observer functionality for manipulating the Grid entity’s attributes</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">makeUpdater</span>({

    <span class="hljs-attr">event</span>: [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;change&#x27;</span>],
    <span class="hljs-attr">origin</span>: <span class="hljs-string">&#x27;.controlItem&#x27;</span>,

    <span class="hljs-attr">target</span>: myGrid,

    <span class="hljs-attr">useNativeListener</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">preventDefault</span>: <span class="hljs-literal">true</span>,

    <span class="hljs-attr">updates</span>: {

        <span class="hljs-attr">columns</span>: [<span class="hljs-string">&#x27;columns&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],
        <span class="hljs-attr">rows</span>: [<span class="hljs-string">&#x27;rows&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],

        <span class="hljs-attr">relativeWidth</span>: [<span class="hljs-string">&#x27;width&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">absoluteWidth</span>: [<span class="hljs-string">&#x27;width&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],

        <span class="hljs-attr">relativeHeight</span>: [<span class="hljs-string">&#x27;height&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">absoluteHeight</span>: [<span class="hljs-string">&#x27;height&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],

        <span class="hljs-attr">columnGutter</span>: [<span class="hljs-string">&#x27;columnGutterWidth&#x27;</span>, <span class="hljs-string">&#x27;float&#x27;</span>],
        <span class="hljs-attr">rowGutter</span>: [<span class="hljs-string">&#x27;rowGutterWidth&#x27;</span>, <span class="hljs-string">&#x27;float&#x27;</span>],

        <span class="hljs-attr">start_xPercent</span>: [<span class="hljs-string">&#x27;startX&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">start_xAbsolute</span>: [<span class="hljs-string">&#x27;startX&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],
        <span class="hljs-attr">start_xString</span>: [<span class="hljs-string">&#x27;startX&#x27;</span>, <span class="hljs-string">&#x27;raw&#x27;</span>],

        <span class="hljs-attr">start_yPercent</span>: [<span class="hljs-string">&#x27;startY&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">start_yAbsolute</span>: [<span class="hljs-string">&#x27;startY&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],
        <span class="hljs-attr">start_yString</span>: [<span class="hljs-string">&#x27;startY&#x27;</span>, <span class="hljs-string">&#x27;raw&#x27;</span>],

        <span class="hljs-attr">handle_xPercent</span>: [<span class="hljs-string">&#x27;handleX&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">handle_xAbsolute</span>: [<span class="hljs-string">&#x27;handleX&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],
        <span class="hljs-attr">handle_xString</span>: [<span class="hljs-string">&#x27;handleX&#x27;</span>, <span class="hljs-string">&#x27;raw&#x27;</span>],

        <span class="hljs-attr">handle_yPercent</span>: [<span class="hljs-string">&#x27;handleY&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">handle_yAbsolute</span>: [<span class="hljs-string">&#x27;handleY&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],
        <span class="hljs-attr">handle_yString</span>: [<span class="hljs-string">&#x27;handleY&#x27;</span>, <span class="hljs-string">&#x27;raw&#x27;</span>],

        <span class="hljs-attr">offset_xPercent</span>: [<span class="hljs-string">&#x27;offsetX&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">offset_xAbsolute</span>: [<span class="hljs-string">&#x27;offsetX&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],

        <span class="hljs-attr">offset_yPercent</span>: [<span class="hljs-string">&#x27;offsetY&#x27;</span>, <span class="hljs-string">&#x27;%&#x27;</span>],
        <span class="hljs-attr">offset_yAbsolute</span>: [<span class="hljs-string">&#x27;offsetY&#x27;</span>, <span class="hljs-string">&#x27;round&#x27;</span>],

        <span class="hljs-attr">roll</span>: [<span class="hljs-string">&#x27;roll&#x27;</span>, <span class="hljs-string">&#x27;float&#x27;</span>],
        <span class="hljs-attr">scale</span>: [<span class="hljs-string">&#x27;scale&#x27;</span>, <span class="hljs-string">&#x27;float&#x27;</span>],

        <span class="hljs-attr">upend</span>: [<span class="hljs-string">&#x27;flipUpend&#x27;</span>, <span class="hljs-string">&#x27;boolean&#x27;</span>],
        <span class="hljs-attr">reverse</span>: [<span class="hljs-string">&#x27;flipReverse&#x27;</span>, <span class="hljs-string">&#x27;boolean&#x27;</span>],
    },
});</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-13">&#x00a7;</a>
              </div>
              <p>Event listeners for setting Grid tile fills</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">updateBaseFill</span> = (<span class="hljs-params">e</span>) =&gt; {

    e.<span class="hljs-title function_">preventDefault</span>();
    e.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span>;

    <span class="hljs-keyword">const</span> val = e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>;

    <span class="hljs-keyword">switch</span> (val) {

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;imageGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">0</span>, imageGrid);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;imageTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">0</span>, imageTile);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;videoGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">0</span>, videoGrid);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;videoTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">0</span>, videoTile);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;spriteGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">0</span>, spriteGrid);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;spriteTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">0</span>, spriteTile);
            <span class="hljs-keyword">break</span>;
    }
};
scrawl.<span class="hljs-title function_">addNativeListener</span>([<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;change&#x27;</span>], updateBaseFill, <span class="hljs-string">&#x27;#baseFill&#x27;</span>);


<span class="hljs-keyword">const</span> <span class="hljs-title function_">updateHighlightFill</span> = (<span class="hljs-params">e</span>) =&gt; {

    e.<span class="hljs-title function_">preventDefault</span>();
    e.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span>;

    <span class="hljs-keyword">const</span> val = e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>;

    <span class="hljs-keyword">switch</span> (val) {

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;imageGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">1</span>, imageGrid);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;imageTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">1</span>, imageTile);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;videoGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">1</span>, videoGrid);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;videoTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">1</span>, videoTile);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;spriteGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">1</span>, spriteGrid);
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;spriteTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">setTileSourceTo</span>(<span class="hljs-number">1</span>, spriteTile);
            <span class="hljs-keyword">break</span>;
    }
};
scrawl.<span class="hljs-title function_">addNativeListener</span>([<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;change&#x27;</span>], updateHighlightFill, <span class="hljs-string">&#x27;#highlightFill&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-14">&#x00a7;</a>
              </div>
              <p>Event listener for setting Grid gutter fills</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">updateGridStroke</span> = (<span class="hljs-params">e</span>) =&gt; {

    e.<span class="hljs-title function_">preventDefault</span>();
    e.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span>;

    <span class="hljs-keyword">const</span> val = e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>;

    <span class="hljs-keyword">switch</span> (val) {

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;base&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: <span class="hljs-number">0</span>
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;highlight&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: <span class="hljs-number">1</span>
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;imageGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: imageGrid
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;imageTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: imageTile
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;videoGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: videoGrid
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;videoTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: videoTile
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;spriteGrid&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: spriteGrid
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;spriteTile&#x27;</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: spriteTile
            });
            <span class="hljs-keyword">break</span>;

        <span class="hljs-keyword">default</span> :
            myGrid.<span class="hljs-title function_">set</span>({
                <span class="hljs-attr">gutterColor</span>: <span class="hljs-string">&#x27;#808080&#x27;</span>
            });
    }
};
scrawl.<span class="hljs-title function_">addNativeListener</span>([<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;change&#x27;</span>], updateGridStroke, <span class="hljs-string">&#x27;#gridStroke&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-15">&#x00a7;</a>
              </div>
              <p>Event listener for clicks on the &lt;canvas&gt; element</p>
<ul>
<li>Because many browsers/devices will not allow video to be played until a user interacts with it in some way</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">addListener</span>([<span class="hljs-string">&#x27;move&#x27;</span>, <span class="hljs-string">&#x27;up&#x27;</span>], <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {

    viddyOne.<span class="hljs-title function_">set</span>({
        <span class="hljs-attr">video_muted</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">video_loop</span>: <span class="hljs-literal">true</span>,
    }).<span class="hljs-title function_">videoPlay</span>();
}, canvas.<span class="hljs-property">domElement</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-16">&#x00a7;</a>
              </div>
              <p>For this demo we will suppress touchmove functionality over the canvas</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">addNativeListener</span>(<span class="hljs-string">&#x27;touchmove&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> {

    e.<span class="hljs-title function_">preventDefault</span>();
    e.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span>;

}, canvas.<span class="hljs-property">domElement</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-17">&#x00a7;</a>
              </div>
              <p>Setup form</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-title function_">initializeDomInputs</span>([
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;absoluteHeight&#x27;</span>, <span class="hljs-string">&#x27;200&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;absoluteWidth&#x27;</span>, <span class="hljs-string">&#x27;300&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;columnGutter&#x27;</span>, <span class="hljs-string">&#x27;1&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;columns&#x27;</span>, <span class="hljs-string">&#x27;6&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;handle_xAbsolute&#x27;</span>, <span class="hljs-string">&#x27;150&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;handle_xPercent&#x27;</span>, <span class="hljs-string">&#x27;50&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;handle_yAbsolute&#x27;</span>, <span class="hljs-string">&#x27;100&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;handle_yPercent&#x27;</span>, <span class="hljs-string">&#x27;50&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;offset_xAbsolute&#x27;</span>, <span class="hljs-string">&#x27;0&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;offset_xPercent&#x27;</span>, <span class="hljs-string">&#x27;0&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;offset_yAbsolute&#x27;</span>, <span class="hljs-string">&#x27;0&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;offset_yPercent&#x27;</span>, <span class="hljs-string">&#x27;0&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;relativeHeight&#x27;</span>, <span class="hljs-string">&#x27;50&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;relativeWidth&#x27;</span>, <span class="hljs-string">&#x27;50&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;roll&#x27;</span>, <span class="hljs-string">&#x27;0&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;rows&#x27;</span>, <span class="hljs-string">&#x27;6&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;scale&#x27;</span>, <span class="hljs-string">&#x27;1&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;start_xAbsolute&#x27;</span>, <span class="hljs-string">&#x27;300&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;start_xPercent&#x27;</span>, <span class="hljs-string">&#x27;50&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;start_yAbsolute&#x27;</span>, <span class="hljs-string">&#x27;200&#x27;</span>],
    [<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-string">&#x27;start_yPercent&#x27;</span>, <span class="hljs-string">&#x27;50&#x27;</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;baseFill&#x27;</span>, <span class="hljs-number">0</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;gridStroke&#x27;</span>, <span class="hljs-number">0</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;handle_xString&#x27;</span>, <span class="hljs-number">1</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;handle_yString&#x27;</span>, <span class="hljs-number">1</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;highlightFill&#x27;</span>, <span class="hljs-number">1</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;reverse&#x27;</span>, <span class="hljs-number">0</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;start_xString&#x27;</span>, <span class="hljs-number">1</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;start_yString&#x27;</span>, <span class="hljs-number">1</span>],
    [<span class="hljs-string">&#x27;select&#x27;</span>, <span class="hljs-string">&#x27;upend&#x27;</span>, <span class="hljs-number">0</span>],
]);</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-18">&#x00a7;</a>
              </div>
              <h4 id="development-and-testing">Development and testing</h4>
<p>TODO: need to develop a test for killing and resurrecting the Grid entity</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(scrawl.<span class="hljs-property">library</span>);</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>