<!DOCTYPE html>

<html>
<head>
  <title>Demo Canvas 038</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="canvas-062.html">
                  ./demo/canvas-062.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-038">Demo Canvas 038</h1>
<p>Responsive Shape-based entitys</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-038.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 } <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>
              <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> canvas = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">canvas</span>.<span class="hljs-property">mycanvas</span>;

canvas.<span class="hljs-title function_">set</span>({

    <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;honeydew&#x27;</span>,
    <span class="hljs-attr">baseMatchesCanvasDimensions</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">checkForResize</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">ignoreCanvasCssDimensions</span>: <span class="hljs-literal">true</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>Create a shape track along which we can animate a Cell</p>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;responsive-oval&#x27;</span>,

    <span class="hljs-attr">radiusX</span>: <span class="hljs-string">&#x27;40%&#x27;</span>,
    <span class="hljs-attr">radiusY</span>: <span class="hljs-string">&#x27;40%&#x27;</span>,

    <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">strokeStyle</span>: <span class="hljs-string">&#x27;grey&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">10</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;static-oval&#x27;</span>,

    <span class="hljs-attr">radiusX</span>: <span class="hljs-number">100</span>,
    <span class="hljs-attr">radiusY</span>: <span class="hljs-number">140</span>,

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

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;responsive-diamond&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;lightgreen&#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>,

    <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">radiusX</span>: <span class="hljs-string">&#x27;40%&#x27;</span>,
    <span class="hljs-attr">radiusY</span>: <span class="hljs-string">&#x27;40%&#x27;</span>,

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;static-diamond&#x27;</span>,

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

    <span class="hljs-attr">radiusX</span>: <span class="hljs-number">100</span>,
    <span class="hljs-attr">radiusY</span>: <span class="hljs-number">140</span>,    
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;responsive-line&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;orange&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">8</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,

    <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;20%&#x27;</span>, <span class="hljs-string">&#x27;45%&#x27;</span>],
    <span class="hljs-attr">end</span>: [<span class="hljs-string">&#x27;80%&#x27;</span>, <span class="hljs-string">&#x27;45%&#x27;</span>],

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;static-line&#x27;</span>,

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

    <span class="hljs-attr">start</span>: [<span class="hljs-number">50</span>, <span class="hljs-number">210</span>],
    <span class="hljs-attr">end</span>: [<span class="hljs-number">350</span>, <span class="hljs-number">210</span>],
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;responsive-rectangle&#x27;</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;red&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">4</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,

    <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;25%&#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">rectangleWidth</span>: <span class="hljs-string">&#x27;60%&#x27;</span>,
    <span class="hljs-attr">rectangleHeight</span>: <span class="hljs-string">&#x27;15%&#x27;</span>,

    <span class="hljs-attr">radiusT</span>: <span class="hljs-string">&#x27;5%&#x27;</span>,
    <span class="hljs-attr">radiusB</span>: <span class="hljs-string">&#x27;15%&#x27;</span>,

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;static-rectangle&#x27;</span>,
    <span class="hljs-attr">startY</span>: <span class="hljs-string">&#x27;75%&#x27;</span>,

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

    <span class="hljs-attr">rectangleWidth</span>: <span class="hljs-number">200</span>,
    <span class="hljs-attr">rectangleHeight</span>: <span class="hljs-number">100</span>,

    <span class="hljs-attr">radius</span>: <span class="hljs-number">15</span>,
})

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;responsive-star&#x27;</span>,

    <span class="hljs-attr">start</span>: [<span class="hljs-string">&#x27;center&#x27;</span>, <span class="hljs-string">&#x27;25%&#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-string">&#x27;20%&#x27;</span>,
    <span class="hljs-attr">radius2</span>: <span class="hljs-string">&#x27;10%&#x27;</span>,

    <span class="hljs-attr">points</span>: <span class="hljs-number">5</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;#420&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">4</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;static-star&#x27;</span>,
    <span class="hljs-attr">startY</span>: <span class="hljs-string">&#x27;75%&#x27;</span>,
    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;#840&#x27;</span>,

    <span class="hljs-attr">radius1</span>: <span class="hljs-number">120</span>,
    <span class="hljs-attr">radius2</span>: <span class="hljs-number">80</span>,
});

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;static-cog&#x27;</span>,

    <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">outerRadius</span>: <span class="hljs-number">180</span>,
    <span class="hljs-attr">innerRadius</span>: <span class="hljs-number">160</span>,
    <span class="hljs-attr">outerControlsDistance</span>: <span class="hljs-number">10</span>,
    <span class="hljs-attr">innerControlsDistance</span>: <span class="hljs-number">6</span>,

    <span class="hljs-attr">points</span>: <span class="hljs-number">36</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">8</span>,
    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;draw&#x27;</span>,

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;responsive-cog&#x27;</span>,

    <span class="hljs-attr">outerRadius</span>: <span class="hljs-string">`<span class="hljs-subst">${(<span class="hljs-number">180</span>/<span class="hljs-number">400</span>) * <span class="hljs-number">100</span>}</span>%`</span>,
    <span class="hljs-attr">innerRadius</span>: <span class="hljs-string">`<span class="hljs-subst">${(<span class="hljs-number">160</span>/<span class="hljs-number">400</span>) * <span class="hljs-number">100</span>}</span>%`</span>,
    <span class="hljs-attr">outerControlsDistance</span>: <span class="hljs-string">`<span class="hljs-subst">${(<span class="hljs-number">10</span>/<span class="hljs-number">400</span>) * <span class="hljs-number">100</span>}</span>%`</span>,
    <span class="hljs-attr">innerControlsDistance</span>: <span class="hljs-string">`<span class="hljs-subst">${(<span class="hljs-number">6</span>/<span class="hljs-number">400</span>) * <span class="hljs-number">100</span>}</span>%`</span>,

    <span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">&#x27;orchid&#x27;</span>,
    <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">4</span>,
});</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-6">&#x00a7;</a>
              </div>
              <h4 id="scene-animation">Scene animation</h4>
<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>);</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-7">&#x00a7;</a>
              </div>
              <p>Create the Display cycle animation</p>

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

    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;demo-animation&quot;</span>,
    <span class="hljs-attr">target</span>: canvas,
    <span class="hljs-attr">afterShow</span>: report,
});</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="sswrap ">
                <a class="ss" href="#section-8">&#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>
