scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
80 lines (60 loc) • 2.95 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo DOM 001</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
#mystack {
margin-left: 10em;
padding: 1em;
width: 600px;
height: 600px;
font-family: monospace;
font-size: 12px;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - DOM test 001</h1>
<h2>Loading the Scrawl-canvas library using a script tag in the HTML code</h2>
<p>Scrawl-canvas is added to the page through a <span class="scrawl-code"><script></span> tag at the bottom of the html code. The tag takes the following attributes:</p>
<h3><script <b>type="module"</b>><i>[Scrawl-canvas code goes here]</i></script></h3>
<p>... or:</p>
<h3><script src="dom-001.js" <b>type="module"</b>></script></h3>
<ul>
<li><span class="scrawl-code">src=</span> - path to the user code which imports the <span class="scrawl-code">scrawl.js</span> file</li>
<li><span class="scrawl-code">type="module"</span> - user code needs to be modular (ES6 style) - it has an <span class="scrawl-code">import</span> instruction at the top of the file</li>
</ul>
<p>By importing the scrawl.js file, the browser will also import all the related files required by Scrawl-canvas. The import code goes at the top of the user code (in this demo, the <span class="scrawl-code">dom-001.js</span> file):</p>
<h3><b>import</b> * as scrawl from '../../relative/path/to/scrawl.js';</h3>
<p>... or if the library has been included via NPM or Yarn:</p>
<h3><b>import</b> * as scrawl from 'scrawl-canvas';</h3>
<p>... or if using the remote CDN version:</p>
<h3><b>import</b> * as scrawl from 'https://unpkg.com/scrawl-canvas@8.9.4';</h3>
<p>The import doesn't need to be called <span class="scrawl-code">'scrawl'</span> - it can be whatever the user prefers.</p>
<div id="mystack" data-scrawl-stack>
<p id="reportmessage"></p>
<div id="secondstack" data-stack style="width: 100%; height: 12em;">
<p style="color: lightgray; font-family: monospace; font-size: 5em; text-align: center;">element in a nested stack</p>
</div>
<canvas id="unusedcanvas"></canvas>
</div>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Import the scrawl.js file</li>
<li>Import all other required Scrawl-canvas files</li>
<li>Discover and prepare stack elements in the DOM</li>
<li>Discover and prepare child elements in each stack element</li>
<li>Discover and prepare the <canvas> element</li>
<li>Track the mouse over the root stack element</li>
</ul>
<p><a href="../docs/demo/dom-001.html">Annotated code</a></p>
</div>
<script src="dom-001.js" type="module"></script>
</body>
</html>