docs/demo/canvas-043.html

<!DOCTYPE html>

<html>
<head>
  <title>Demo Canvas 043</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-015a.html">
                  ./demo/canvas-015a.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-019a.html">
                  ./demo/canvas-019a.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-061.html">
                  ./demo/canvas-061.js
                </a>
              
                
                <a class="source" href="core-001.html">
                  ./demo/core-001.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="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-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="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="rapier-001.html">
                  ./demo/rapier-001.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="temp-000.html">
                  ./demo/temp-000.js
                </a>
              
                
                <a class="source" href="temp-001.html">
                  ./demo/temp-001.js
                </a>
              
                
                <a class="source" href="temp-001a.html">
                  ./demo/temp-001a.js
                </a>
              
                
                <a class="source" href="temp-002.html">
                  ./demo/temp-002.js
                </a>
              
                
                <a class="source" href="temp-003.html">
                  ./demo/temp-003.js
                </a>
              
                
                <a class="source" href="temp-004.html">
                  ./demo/temp-004.js
                </a>
              
                
                <a class="source" href="temp-005.html">
                  ./demo/temp-005.js
                </a>
              
                
                <a class="source" href="temp-006.html">
                  ./demo/temp-006.js
                </a>
              
                
                <a class="source" href="temp-007.html">
                  ./demo/temp-007.js
                </a>
              
                
                <a class="source" href="temp-008.html">
                  ./demo/temp-008.js
                </a>
              
                
                <a class="source" href="temp-009.html">
                  ./demo/temp-009.js
                </a>
              
                
                <a class="source" href="temp-010.html">
                  ./demo/temp-010.js
                </a>
              
                
                <a class="source" href="temp-011.html">
                  ./demo/temp-011.js
                </a>
              
                
                <a class="source" href="temp-012.html">
                  ./demo/temp-012.js
                </a>
              
                
                <a class="source" href="temp-013.html">
                  ./demo/temp-013.js
                </a>
              
                
                <a class="source" href="temp-014.html">
                  ./demo/temp-014.js
                </a>
              
                
                <a class="source" href="temp-015.html">
                  ./demo/temp-015.js
                </a>
              
                
                <a class="source" href="temp-016.html">
                  ./demo/temp-016.js
                </a>
              
                
                <a class="source" href="temp-017.html">
                  ./demo/temp-017.js
                </a>
              
                
                <a class="source" href="temp-018.html">
                  ./demo/temp-018.js
                </a>
              
                
                <a class="source" href="temp-018a.html">
                  ./demo/temp-018a.js
                </a>
              
                
                <a class="source" href="temp-019.html">
                  ./demo/temp-019.js
                </a>
              
                
                <a class="source" href="temp-020.html">
                  ./demo/temp-020.js
                </a>
              
                
                <a class="source" href="temp-021.html">
                  ./demo/temp-021.js
                </a>
              
                
                <a class="source" href="temp-022.html">
                  ./demo/temp-022.js
                </a>
              
                
                <a class="source" href="temp-023.html">
                  ./demo/temp-023.js
                </a>
              
                
                <a class="source" href="temp-024.html">
                  ./demo/temp-024.js
                </a>
              
                
                <a class="source" href="temp-025.html">
                  ./demo/temp-025.js
                </a>
              
                
                <a class="source" href="temp-026.html">
                  ./demo/temp-026.js
                </a>
              
                
                <a class="source" href="temp-027.html">
                  ./demo/temp-027.js
                </a>
              
                
                <a class="source" href="temp-028.html">
                  ./demo/temp-028.js
                </a>
              
                
                <a class="source" href="temp-029.html">
                  ./demo/temp-029.js
                </a>
              
                
                <a class="source" href="temp-030.html">
                  ./demo/temp-030.js
                </a>
              
                
                <a class="source" href="temp-031.html">
                  ./demo/temp-031.js
                </a>
              
                
                <a class="source" href="temp-032.html">
                  ./demo/temp-032.js
                </a>
              
                
                <a class="source" href="temp-033.html">
                  ./demo/temp-033.js
                </a>
              
                
                <a class="source" href="temp-034.html">
                  ./demo/temp-034.js
                </a>
              
                
                <a class="source" href="temp-035.html">
                  ./demo/temp-035.js
                </a>
              
                
                <a class="source" href="temp-036.html">
                  ./demo/temp-036.js
                </a>
              
                
                <a class="source" href="temp-100.html">
                  ./demo/temp-100.js
                </a>
              
                
                <a class="source" href="temp-101.html">
                  ./demo/temp-101.js
                </a>
              
                
                <a class="source" href="temp-102.html">
                  ./demo/temp-102.js
                </a>
              
                
                <a class="source" href="temp-103.html">
                  ./demo/temp-103.js
                </a>
              
                
                <a class="source" href="temp-104.html">
                  ./demo/temp-104.js
                </a>
              
                
                <a class="source" href="temp-inkscapeSvgFilters.html">
                  ./demo/temp-inkscapeSvgFilters.js
                </a>
              
                
                <a class="source" href="temp-lottie.html">
                  ./demo/temp-lottie.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-043">Demo Canvas 043</h1>
<p>Test various clipping strategies</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-043.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>;</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-3">&#x00a7;</a>
              </div>
              <p>Get Scrawl-canvas to recognise and act on device pixel ratios greater than 1</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">setIgnorePixelRatio</span>(<span class="hljs-literal">false</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-4">&#x00a7;</a>
              </div>
              <h4 id="scene-setup">Scene setup</h4>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> {canvas1, canvas2, canvas3} = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">canvas</span>;
<span class="hljs-keyword">const</span> cells = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">cell</span>;

scrawl.<span class="hljs-title function_">importDomImage</span>(<span class="hljs-string">&#x27;.canal&#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>
              <h4 id="canvas-1">Canvas 1</h4>
<p>Applying more than one clipped region to a scene, using Groups to separate them</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>canvas1.<span class="hljs-title function_">set</span>({
    <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;lemonchiffon&#x27;</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>The scene will be made up of two clipped images, both draggable around the canvas</p>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-cog-clip&#x27;</span>,
    <span class="hljs-attr">host</span>: canvas1.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,

}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-star-clip&#x27;</span>,
    <span class="hljs-attr">host</span>: canvas1.<span class="hljs-property">base</span>.<span class="hljs-property">name</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>Clipping region entitys</p>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-cog-clipper&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas1-cog-clip&#x27;</span>,

    <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;25%&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
    <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],

    <span class="hljs-attr">outerRadius</span>: <span class="hljs-number">140</span>,
    <span class="hljs-attr">innerRadius</span>: <span class="hljs-number">120</span>,
    <span class="hljs-attr">outerControlsDistance</span>: <span class="hljs-number">20</span>,
    <span class="hljs-attr">innerControlsDistance</span>: <span class="hljs-number">16</span>,
    <span class="hljs-attr">points</span>: <span class="hljs-number">24</span>,

    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;clip&#x27;</span>,

    <span class="hljs-attr">delta</span>: {
        <span class="hljs-attr">roll</span>: <span class="hljs-number">0.4</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>The clipping region entity MUST be stamped on the canvas before the entitys that will be clipped by it</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-attr">bringToFrontOnDrag</span>: <span class="hljs-literal">false</span>,</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-9">&#x00a7;</a>
              </div>
              <p>Add outlines to our clipped regions</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-cog-outline&#x27;</span>,
    <span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas1-cog-clipper&#x27;</span>,
    <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;coral&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-star-clipper&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas1-star-clip&#x27;</span>,

    <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;75%&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
    <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],

    <span class="hljs-attr">radius1</span>: <span class="hljs-number">80</span>,
    <span class="hljs-attr">radius2</span>: <span class="hljs-number">140</span>,
    <span class="hljs-attr">points</span>: <span class="hljs-number">6</span>,

    <span class="hljs-attr">delta</span>: {
        <span class="hljs-attr">roll</span>: -<span class="hljs-number">0.7</span>,
    },

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

}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-star-outline&#x27;</span>,
    <span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas1-star-clipper&#x27;</span>,
    <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;coral&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#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>Picture entitys - we pivot these to our clipping region entitys to make the clipped display the same, wherever it is moved to on the canvas</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-string">&#x27;canvas1-cog-image&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas1-cog-clip&#x27;</span>,

    <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;factory&#x27;</span>,

    <span class="hljs-attr">dimensions</span>: [<span class="hljs-number">400</span>, <span class="hljs-number">400</span>],
    <span class="hljs-attr">copyDimensions</span>: [<span class="hljs-number">400</span>, <span class="hljs-number">400</span>],

    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas1-cog-clipper&#x27;</span>,
    <span class="hljs-attr">addPivotRotation</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,
    <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],

}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-star-image&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas1-star-clip&#x27;</span>,

    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas1-star-clipper&#x27;</span>,
    <span class="hljs-attr">copyStartX</span>: <span class="hljs-number">100</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>We’re not interested with associating the canvas 1 drag group with the canvas’s base cell - the entitys in this group will already be assigned to the clip groups, thus will already be included in the canvas’s Display cycle</p>
<ul>
<li>KNOWN BUG - the entitys are not draggable on first user mousedown, but are draggable afterwards</li>
</ul>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas1-drag-group&#x27;</span>,

}).<span class="hljs-title function_">addArtefacts</span>(<span class="hljs-string">&#x27;canvas1-cog-clipper&#x27;</span>, <span class="hljs-string">&#x27;canvas1-star-clipper&#x27;</span>);

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

    <span class="hljs-attr">zone</span>: canvas1,
    <span class="hljs-attr">collisionGroup</span>: <span class="hljs-string">&#x27;canvas1-drag-group&#x27;</span>,
    <span class="hljs-attr">endOn</span>: [<span class="hljs-string">&#x27;up&#x27;</span>, <span class="hljs-string">&#x27;leave&#x27;</span>],
    <span class="hljs-attr">preventTouchDefaultWhenDragging</span>: <span class="hljs-literal">true</span>,
});</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="canvas-2">Canvas 2:</h4>
<p>Generate and use Picture entitys from clipped scenes</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>canvas2.<span class="hljs-title function_">set</span>({
    <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;honeydew&#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>We will generate Image assets from cells created specifically for this one task</p>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-cog-clip&#x27;</span>,
    <span class="hljs-attr">dimensions</span>: [<span class="hljs-number">280</span>, <span class="hljs-number">280</span>],
    <span class="hljs-attr">shown</span>: <span class="hljs-literal">false</span>,
});

canvas2.<span class="hljs-title function_">buildCell</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-star-clip&#x27;</span>,
    <span class="hljs-attr">dimensions</span>: [<span class="hljs-number">280</span>, <span class="hljs-number">280</span>],
    <span class="hljs-attr">shown</span>: <span class="hljs-literal">false</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>Clipped entitys - this code is much the same as for canvas1, without dragging and delta animation</p>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-cog-clipper&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas2-cog-clip&#x27;</span>,

    <span class="hljs-attr">outerRadius</span>: <span class="hljs-number">140</span>,
    <span class="hljs-attr">innerRadius</span>: <span class="hljs-number">120</span>,
    <span class="hljs-attr">outerControlsDistance</span>: <span class="hljs-number">20</span>,
    <span class="hljs-attr">innerControlsDistance</span>: <span class="hljs-number">16</span>,
    <span class="hljs-attr">points</span>: <span class="hljs-number">24</span>,

    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;clip&#x27;</span>,

}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-cog-outline&#x27;</span>,
    <span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas2-cog-clipper&#x27;</span>,
    <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;coral&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-star-clipper&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas2-star-clip&#x27;</span>,

    <span class="hljs-attr">radius1</span>: <span class="hljs-number">140</span>,
    <span class="hljs-attr">radius2</span>: <span class="hljs-number">80</span>,
    <span class="hljs-attr">points</span>: <span class="hljs-number">6</span>,

    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;clip&#x27;</span>,

}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-star-outline&#x27;</span>,
    <span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas2-star-clipper&#x27;</span>,
    <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;coral&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-cog-image&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas2-cog-clip&#x27;</span>,

    <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;factory&#x27;</span>,

    <span class="hljs-attr">dimensions</span>: [<span class="hljs-number">280</span>, <span class="hljs-number">280</span>],
    <span class="hljs-attr">copyDimensions</span>: [<span class="hljs-number">280</span>, <span class="hljs-number">280</span>],

    <span class="hljs-attr">copyStart</span>: [<span class="hljs-number">70</span>, <span class="hljs-number">60</span>],

    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas2-cog-clipper&#x27;</span>,
    <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,

}).<span class="hljs-title function_">clone</span>({

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-star-image&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas2-star-clip&#x27;</span>,

    <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas2-star-clipper&#x27;</span>,
    <span class="hljs-attr">copyStart</span>: [<span class="hljs-number">170</span>, <span class="hljs-number">20</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>We will get Scrawl-canvas to capture the image output of each Cell as part of the first Display cycle. Then we can create regular Picture entitys from those images, and get rid of the original cells and entitys.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">createImageFromCell</span>(<span class="hljs-string">&#x27;canvas2-cog-clip&#x27;</span>, <span class="hljs-literal">true</span>);
scrawl.<span class="hljs-title function_">createImageFromCell</span>(<span class="hljs-string">&#x27;canvas2-star-clip&#x27;</span>, <span class="hljs-literal">true</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>We create our Picture entitys from Cell output in a post-initialization step. Note that this function may run more than once as page loading is asynchronous and unpredictable</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> canvasTwoPostInitialization = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;running canvasTwoPostInitialization()&#x27;</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>check to see if groups have been created - they don’t create until late in the page load process</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">const</span> cog = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">cell</span>[<span class="hljs-string">&#x27;canvas2-cog-clip&#x27;</span>],
        star = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">cell</span>[<span class="hljs-string">&#x27;canvas2-star-clip&#x27;</span>];

    <span class="hljs-keyword">let</span> drag = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[<span class="hljs-string">&#x27;canvas2-drag-group&#x27;</span>];</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-18">&#x00a7;</a>
              </div>
              <p>create our drag group and dragzone, if they don’t already exist</p>
<ul>
<li>KNOWN BUG - the entitys are not draggable on first user mousedown, but are draggable afterwards</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (!drag) {

        drag = scrawl.<span class="hljs-title function_">makeGroup</span>({
            <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-drag-group&#x27;</span>,
        });

        scrawl.<span class="hljs-title function_">makeDragZone</span>({
            <span class="hljs-attr">zone</span>: canvas2,
            <span class="hljs-attr">collisionGroup</span>: <span class="hljs-string">&#x27;canvas2-drag-group&#x27;</span>,
            <span class="hljs-attr">endOn</span>: [<span class="hljs-string">&#x27;up&#x27;</span>, <span class="hljs-string">&#x27;leave&#x27;</span>],
            <span class="hljs-attr">preventTouchDefaultWhenDragging</span>: <span class="hljs-literal">true</span>,
        });
    }

    <span class="hljs-keyword">if</span> (cog) {

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

            <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-cog&#x27;</span>,
            <span class="hljs-attr">group</span>: canvas2.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,

            <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;canvas2-cog-clip-image&#x27;</span>,

            <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;25%&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
            <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],

            <span class="hljs-attr">dimensions</span>: [<span class="hljs-number">280</span>, <span class="hljs-number">280</span>],
            <span class="hljs-attr">copyDimensions</span>: [<span class="hljs-string">&#x27;100%&#x27;</span>, <span class="hljs-string">&#x27;100%&#x27;</span>],

            <span class="hljs-attr">delta</span>: {
                <span class="hljs-attr">roll</span>: <span class="hljs-number">0.4</span>,
            },

            <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;fill&#x27;</span>,
        });

        drag.<span class="hljs-title function_">addArtefacts</span>(<span class="hljs-string">&#x27;canvas2-cog&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-19">&#x00a7;</a>
              </div>
              <p>The cog cell, and its entitys, have served their purpose; time to get rid of them</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[cog.<span class="hljs-property">name</span>].<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
        cog.<span class="hljs-title function_">kill</span>();
    }

    <span class="hljs-keyword">if</span> (star) {

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

            <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas2-star&#x27;</span>,
            <span class="hljs-attr">group</span>: canvas2.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,

            <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;canvas2-star-clip-image&#x27;</span>,

            <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;75%&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
            <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],

            <span class="hljs-attr">dimensions</span>: [<span class="hljs-number">280</span>, <span class="hljs-number">280</span>],
            <span class="hljs-attr">copyDimensions</span>: [<span class="hljs-string">&#x27;100%&#x27;</span>, <span class="hljs-string">&#x27;100%&#x27;</span>],

            <span class="hljs-attr">delta</span>: {
                <span class="hljs-attr">roll</span>: -<span class="hljs-number">0.7</span>,
            },

            <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;fill&#x27;</span>,
        });

        drag.<span class="hljs-title function_">addArtefacts</span>(<span class="hljs-string">&#x27;canvas2-star&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-20">&#x00a7;</a>
              </div>
              <p>The star cell, and its entitys, have served their purpose; time to get rid of them</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[star.<span class="hljs-property">name</span>].<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
        star.<span class="hljs-title function_">kill</span>();
    }
};</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-21">&#x00a7;</a>
              </div>
              <h4 id="canvas-3">Canvas 3:</h4>
<p>Emulate clipping to a Phrase entity using a composite scene rendered in its own cell</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>canvas3.<span class="hljs-title function_">set</span>({
    <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;lavender&#x27;</span>,
})</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-22">&#x00a7;</a>
              </div>
              <p>We will generate Image assets from cells created specifically for this one task</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> serifHelloCell = canvas3.<span class="hljs-title function_">buildCell</span>({
    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas3-serif-cell&#x27;</span>,
    <span class="hljs-attr">dimensions</span>: [<span class="hljs-string">&#x27;100%&#x27;</span>, <span class="hljs-string">&#x27;100%&#x27;</span>],
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas3-serif-text-hello&#x27;</span>,
    <span class="hljs-attr">group</span>: <span class="hljs-string">&#x27;canvas3-serif-cell&#x27;</span>,

    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;HELLO!&#x27;</span>,
    <span class="hljs-attr">font</span>: <span class="hljs-string">&#x27;bold 120px serif&#x27;</span>,
    <span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1</span>,
});

<span class="hljs-keyword">const</span> canvasThreePostInitialization = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;running canvasThreePostInitialization()&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-23">&#x00a7;</a>
              </div>
              <p>check to see if groups have been created - they don’t create until late in the page load process</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">let</span> drag = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[<span class="hljs-string">&#x27;canvas3-drag-group&#x27;</span>];</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-24">&#x00a7;</a>
              </div>
              <p>create our drag group and dragzone, if they don’t already exist</p>
<ul>
<li>KNOWN BUG - the entitys are not draggable on first user mousedown, but are draggable afterwards</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (!drag) {

        drag = scrawl.<span class="hljs-title function_">makeGroup</span>({
            <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas3-drag-group&#x27;</span>,
        });

        scrawl.<span class="hljs-title function_">makeDragZone</span>({
            <span class="hljs-attr">zone</span>: canvas3,
            <span class="hljs-attr">collisionGroup</span>: <span class="hljs-string">&#x27;canvas3-drag-group&#x27;</span>,
            <span class="hljs-attr">endOn</span>: [<span class="hljs-string">&#x27;up&#x27;</span>, <span class="hljs-string">&#x27;leave&#x27;</span>],
            <span class="hljs-attr">preventTouchDefaultWhenDragging</span>: <span class="hljs-literal">true</span>,
        });
    }

    <span class="hljs-keyword">const</span> phrase = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">entity</span>[<span class="hljs-string">&#x27;canvas3-serif-text-hello&#x27;</span>];

    <span class="hljs-keyword">if</span> (phrase) {</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-25">&#x00a7;</a>
              </div>
              <p>We need to retrieve the Phrase entity’s dimensions - which are hard to guess before it’s created - and update its surrounding environment to fit.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">const</span> [width, height] = phrase.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;dimensions&#x27;</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-26">&#x00a7;</a>
              </div>
              <p>We can use the phrase entity as a stencil by applying a Picture entity over it with a GCO = ‘source-atop’</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-string">&#x27;canvas3-serif-image&#x27;</span>,
            <span class="hljs-attr">group</span>: serifHelloCell.<span class="hljs-property">name</span>,

            <span class="hljs-attr">asset</span>: <span class="hljs-string">&#x27;factory&#x27;</span>,

            width,
            height,
            <span class="hljs-attr">copyDimensions</span>: [width, height],
            <span class="hljs-attr">copyStart</span>: [<span class="hljs-number">50</span>, <span class="hljs-number">50</span>],

            <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;fill&#x27;</span>,
            <span class="hljs-attr">order</span>: <span class="hljs-number">1</span>,
            <span class="hljs-attr">globalCompositeOperation</span>: <span class="hljs-string">&#x27;source-atop&#x27;</span>,
        });</pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-27">&#x00a7;</a>
              </div>
              <p>We can also add an outline, if we want</p>

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

            <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas3-serif-outline&#x27;</span>,
            <span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
            <span class="hljs-attr">globalCompositeOperation</span>: <span class="hljs-string">&#x27;source-over&#x27;</span>,

            <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,
            <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">3</span>,
            <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;coral&#x27;</span>,
        });</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-28">&#x00a7;</a>
              </div>
              <p>We cannot directly drag-and-drop a Cell, but we can create a Block entity and pivot the Cell to it, then drag-and-drop the Block</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        scrawl.<span class="hljs-title function_">makeBlock</span>({
            <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;canvas3-serif-block&#x27;</span>,
            <span class="hljs-attr">group</span>: canvas3.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
            width, 
            height,
            <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
            <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
            <span class="hljs-attr">delta</span>: {
                <span class="hljs-attr">roll</span>: <span class="hljs-number">0.5</span>,
            },
            <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
        })

        serifHelloCell.<span class="hljs-title function_">set</span>({
            width,
            height, 
            <span class="hljs-attr">handle</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;center&#x27;</span>],
            <span class="hljs-attr">pivot</span>: <span class="hljs-string">&#x27;canvas3-serif-block&#x27;</span>,
            <span class="hljs-attr">addPivotRotation</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">lockTo</span>: <span class="hljs-string">&#x27;pivot&#x27;</span>,
        });

        drag.<span class="hljs-title function_">addArtefacts</span>(<span class="hljs-string">&#x27;canvas3-serif-block&#x27;</span>);
    }
};</pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-29">&#x00a7;</a>
              </div>
              <h4 id="scene-animation">Scene animation</h4>
<p>Function will be called 3 times - once per canvas - so we need to make sure the appropriate function gets invoked for that canvas</p>
<ul>
<li>Multiple calls invoked because the makeRender function will generate separate animation objects for each canvas target.</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> postInitialization = <span class="hljs-keyword">function</span> (<span class="hljs-params">anim</span>) {

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(anim.<span class="hljs-property">target</span>.<span class="hljs-property">name</span>);

    <span class="hljs-keyword">let</span> target = anim.<span class="hljs-property">target</span>.<span class="hljs-property">name</span>;

    <span class="hljs-keyword">if</span> (<span class="hljs-string">&#x27;canvas2&#x27;</span> === target) <span class="hljs-title function_">canvasTwoPostInitialization</span>();
    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-string">&#x27;canvas3&#x27;</span> === target) <span class="hljs-title function_">canvasThreePostInitialization</span>();
};

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;demo-animation&#x27;</span>,
    <span class="hljs-attr">target</span>: [canvas1, canvas2, canvas3],</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-30">&#x00a7;</a>
              </div>
              <p>Note that this function will be run three times - once for each of the canvases targeted. Thus we need to code the function defensively so that code related to a particular canvas runs only once </p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-attr">afterCreated</span>: postInitialization,
});</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-31">&#x00a7;</a>
              </div>
              <h4 id="development-and-testing">Development and testing</h4>

            </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>