Generate guides html from md

Author: williamngan

guide.md

@@ -934,11 +934,11 @@ Here we add an object that conforms to the [IPlayer](https://ptsjs.org/docs/?p=T
 - `start` function is called when the space is ready. It includes 2 parameters: `bound` which returns the bounding box, and `space` which returns its space.
 
 
-- `animate` function is called continuously when the space plays. It includes 2 parameters: `time` which gives the current running time, and `ftime` which gives the time taken to draw the previous frame.
+* `animate` function is called continuously when the space plays. It includes 2 parameters: `time` which gives the current running time, and `ftime` which gives the time taken to draw the previous frame.
 
-- `action` function is called when an user event is detected. It includes 4 parameters: `type` is a string that returns the action's name. ("up", "down", "move", "drag", "drop", "over", and "out"). `x` and `y` returns the position at which the action happened, and `event` returns the actual event object. See also: [`bindMouse`](https://ptsjs.org/docs.md#canvas-canvasspace)
+* `action` function is called when an user event is detected. It includes 4 parameters: `type` is a string that returns the action's name. ("up", "down", "move", "drag", "drop", "over", and "out"). `x` and `y` returns the position at which the action happened, and `event` returns the actual event object. See also: [`bindMouse`](https://ptsjs.org/docs.md#canvas-canvasspace)
 
-- `resize` function is called when the space is resized. It includes 2 parameter: `size` which returns the new size, and event which returns the event object. You'll also need to add `{resize: true}` in [`setup`](https://ptsjs.org/docs.md#canvas-canvasspace) to enable tracking.
+* `resize` function is called when the space is resized. It includes 2 parameter: `size` which returns the new size, and event which returns the event object. You'll also need to add `{resize: true}` in [`setup`](https://ptsjs.org/docs.md#canvas-canvasspace) to enable tracking.
 
 You may add multiple players into a space, each taking care of specific parts of a scene. Use [`add`](https://ptsjs.org/docs.md#canvas-canvasspace) and [`remove`](https://ptsjs.org/docs.md#canvas-canvasspace) to manage a space's players.
 
@@ -1097,7 +1097,7 @@ The following demo shows 2 paragraphs with different line-height and alignments
 
 ##### You may combine `alignText` with `paragraphBox` too.
 
-For long paragraphs, you may consider using [`fontWidthEstimate `](https://ptsjs.org/docs.md#canvas-canvasform). This will use a simple heuristic to estimate text width, which is less accurate but may be faster.
+For long paragraphs, you may consider using [`fontWidthEstimate`](https://ptsjs.org/docs.md#canvas-canvasform). This will use a simple heuristic to estimate text width, which is less accurate but may be faster.
 
 #### Considerations
 

guide/Animation-0700.html

@@ -121,4 +121,4 @@ <h3>Cheat Sheet</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Extensions-8000.html

@@ -68,4 +68,4 @@ <h3>Your Contribution</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Get-started-0100.html

@@ -178,4 +178,4 @@ <h3>Visibles from invisibles</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Group-0300.html

@@ -131,4 +131,4 @@ <h3>Cheat sheet</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Image-0900.html

@@ -96,10 +96,18 @@ <h5>Applying transforms to the pattern. Hover to rotate the pattern.</h5>
 <p>It's now your turn to experiment!</p>
 <h3>Tips and Tricks</h3>
 <ul>
-<li><p>Anticipate screens with different pixel density. You can pass a CanvasSpace's <a href="https://ptsjs.org/docs/?p=Canvas_CanvasSpace#accessor_pixelScale"><code>pixelScale</code></a> when creating an Img instance. (See example in Cheatsheet below)</p></li>
-<li><p>You can <a href="#image-img"><code>load</code></a> an image from a base64 string or an url, or from a blob via the <a href="#image-img"><code>fromBlob</code></a> function. To export the current image, use <a href="#image-img"><code>toBase64</code></a> or <a href="#image-img"><code>toBlob</code></a> functions.</p></li>
-<li><p>CanvasForm's <a href="#canvas-canvasform"><code>image</code></a> drawing function can take either an Img instance or a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource">CanvasImageSource</a> which includes various kinds of image objects like HTML Image or Canvas.</p></li>
-<li><p>Typically, you can't load an image from another domain due to security concerns. But if the image server allows for it and you want to do it, you can set the <code>crossOrigin</code> parameter to <code>true</code> when creating an  <code>Img</code> instance. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">More details here</a>.</p></li>
+<li>
+<p>Anticipate screens with different pixel density. You can pass a CanvasSpace's <a href="https://ptsjs.org/docs/?p=Canvas_CanvasSpace#accessor_pixelScale"><code>pixelScale</code></a> when creating an Img instance. (See example in Cheatsheet below)</p>
+</li>
+<li>
+<p>You can <a href="#image-img"><code>load</code></a> an image from a base64 string or an url, or from a blob via the <a href="#image-img"><code>fromBlob</code></a> function. To export the current image, use <a href="#image-img"><code>toBase64</code></a> or <a href="#image-img"><code>toBlob</code></a> functions.</p>
+</li>
+<li>
+<p>CanvasForm's <a href="#canvas-canvasform"><code>image</code></a> drawing function can take either an Img instance or a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource">CanvasImageSource</a> which includes various kinds of image objects like HTML Image or Canvas.</p>
+</li>
+<li>
+<p>Typically, you can't load an image from another domain due to security concerns. But if the image server allows for it and you want to do it, you can set the <code>crossOrigin</code> parameter to <code>true</code> when creating an  <code>Img</code> instance. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">More details here</a>.</p>
+</li>
 </ul>
 <h3>Cheatsheet</h3>
 <p>Creating, loading, displaying</p>
@@ -174,4 +182,4 @@ <h3>Cheatsheet</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Op-0400.html

@@ -184,4 +184,4 @@ <h3>Cheat sheet</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Pt-0200.html

@@ -166,4 +166,4 @@ <h3>Cheat sheet</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Sound-0800.html

@@ -177,4 +177,4 @@ <h3>Cheatsheet</h3>
 </script>
 
 </body>
-</html>
+</html>

guide/Space-0500.html

@@ -55,9 +55,15 @@ <h3>Players</h3>
 <li><code>start</code> function is called when the space is ready. It includes 2 parameters: <code>bound</code> which returns the bounding box, and <code>space</code> which returns its space.</li>
 </ul>
 <ul>
-<li><p><code>animate</code> function is called continuously when the space plays. It includes 2 parameters: <code>time</code> which gives the current running time, and <code>ftime</code> which gives the time taken to draw the previous frame.</p></li>
-<li><p><code>action</code> function is called when an user event is detected. It includes 4 parameters: <code>type</code> is a string that returns the action's name. (&quot;up&quot;, &quot;down&quot;, &quot;move&quot;, &quot;drag&quot;, &quot;drop&quot;, &quot;over&quot;, and &quot;out&quot;). <code>x</code> and <code>y</code> returns the position at which the action happened, and <code>event</code> returns the actual event object. See also: <a href="#canvas-canvasspace"><code>bindMouse</code></a></p></li>
-<li><p><code>resize</code> function is called when the space is resized. It includes 2 parameter: <code>size</code> which returns the new size, and event which returns the event object. You'll also need to add <code>{resize: true}</code> in <a href="#canvas-canvasspace"><code>setup</code></a> to enable tracking.</p></li>
+<li>
+<p><code>animate</code> function is called continuously when the space plays. It includes 2 parameters: <code>time</code> which gives the current running time, and <code>ftime</code> which gives the time taken to draw the previous frame.</p>
+</li>
+<li>
+<p><code>action</code> function is called when an user event is detected. It includes 4 parameters: <code>type</code> is a string that returns the action's name. (&quot;up&quot;, &quot;down&quot;, &quot;move&quot;, &quot;drag&quot;, &quot;drop&quot;, &quot;over&quot;, and &quot;out&quot;). <code>x</code> and <code>y</code> returns the position at which the action happened, and <code>event</code> returns the actual event object. See also: <a href="#canvas-canvasspace"><code>bindMouse</code></a></p>
+</li>
+<li>
+<p><code>resize</code> function is called when the space is resized. It includes 2 parameter: <code>size</code> which returns the new size, and event which returns the event object. You'll also need to add <code>{resize: true}</code> in <a href="#canvas-canvasspace"><code>setup</code></a> to enable tracking.</p>
+</li>
 </ul>
 <p>You may add multiple players into a space, each taking care of specific parts of a scene. Use <a href="#canvas-canvasspace"><code>add</code></a> and <a href="#canvas-canvasspace"><code>remove</code></a> to manage a space's players.</p>
 <h3>Animation and interaction</h3>
@@ -91,16 +97,16 @@ <h3>Form</h3>
 <h5>A demo of drawing different shapes</h5>
 <p>And since both Space and Form are javascript classes, you can extend them to override its functions and add new ones.</p>
 <h3>SVG Space</h3>
-<p>You can switch your code from <a href="#canvas-canvasspace"><code>CanvasSpace</code></a> to <a href="#svg-svgspace"><code>SVGSpace</code></a> without changing your drawing code: initiate the space as <code>SVGSpace</code> instead of <code>CanvasSpace</code>, and <code>space.getForm()</code> will return an <a href="#svg-svgform"><code>SVGForm</code></a>, which shares the complete <code>CanvasForm</code> drawing API &mdash; shapes, gradients, dashes, text and more render as svg automatically.</p>
+<p>You can switch your code from <a href="#canvas-canvasspace"><code>CanvasSpace</code></a> to <a href="#svg-svgspace"><code>SVGSpace</code></a> without changing your drawing code: initiate the space as <code>SVGSpace</code> instead of <code>CanvasSpace</code>, and <code>space.getForm()</code> will return an <a href="#svg-svgform"><code>SVGForm</code></a>, which shares the complete <code>CanvasForm</code> drawing API — shapes, gradients, dashes, text and more render as svg automatically.</p>
 <pre><code>const space = new SVGSpace( &quot;#elem&quot; ).setup({ bgcolor: &quot;#123&quot;, resize: true });
 const form = space.getForm();
 // ... the same drawing code as canvas
 </code></pre>
-<p>If you use <a href="#play-quickstart"><code>quickStart</code></a>, it picks the space for you: mount on an <code>&lt;svg&gt;</code> element and you get an <code>SVGSpace</code>; mount on a <code>&lt;canvas&gt;</code> or <code>&lt;div&gt;</code> and you get a <code>CanvasSpace</code>. No other changes needed &mdash; a sketch written for canvas runs on svg as-is.</p>
-<p>Under the hood, consecutive shapes that share styles are merged into single svg elements per frame, so the output stays fast and compact. To export the current frame as an svg file, use <a href="#svg-svgspace"><code>SVGSpace.toSVG</code></a> &mdash; pass <code>true</code> to get one element per shape, which is easier to edit in vector graphics tools.</p>
-<p>(In earlier versions of Pts, SVG rendering required a <code>form.scope(this)</code> call in each animate callback. This is no longer needed &mdash; existing code that calls it will still run, as the function is kept as a harmless no-op.)</p>
+<p>If you use <a href="#play-quickstart"><code>quickStart</code></a>, it picks the space for you: mount on an <code>&lt;svg&gt;</code> element and you get an <code>SVGSpace</code>; mount on a <code>&lt;canvas&gt;</code> or <code>&lt;div&gt;</code> and you get a <code>CanvasSpace</code>. No other changes needed — a sketch written for canvas runs on svg as-is.</p>
+<p>Under the hood, consecutive shapes that share styles are merged into single svg elements per frame, so the output stays fast and compact. To export the current frame as an svg file, use <a href="#svg-svgspace"><code>SVGSpace.toSVG</code></a> — pass <code>true</code> to get one element per shape, which is easier to edit in vector graphics tools.</p>
+<p>(In earlier versions of Pts, SVG rendering required a <code>form.scope(this)</code> call in each animate callback. This is no longer needed — existing code that calls it will still run, as the function is kept as a harmless no-op.)</p>
 <h3>HTML Space</h3>
-<p>There is also an <a href="#dom-htmlspace"><code>HTMLSpace</code></a> that renders forms in basic html elements. It is deprecated and will be removed in a future major version &mdash; use <a href="#svg-svgspace"><code>SVGSpace</code></a> for DOM-based output instead. Because of the limitations of HTML, it cannot draw polygon, arc, and some other shapes.</p>
+<p>There is also an <a href="#dom-htmlspace"><code>HTMLSpace</code></a> that renders forms in basic html elements. It is deprecated and will be removed in a future major version — use <a href="#svg-svgspace"><code>SVGSpace</code></a> for DOM-based output instead. Because of the limitations of HTML, it cannot draw polygon, arc, and some other shapes.</p>
 <p>If you use Pts with React or other web rendering frameworks, it will be better to use the props and states of their virtual DOM implementations instead.</p>
 <h3>Cheat sheet</h3>
 <p>The quickest way to start is to use the <code>quickStart</code> function, which initiates a <a href="#canvas-canvasspace"><code>CanvasSpace</code></a> and adds <code>space</code> and <code>form</code> instances into current scope. You can create an interactive piece in 2 lines of code:</p>
@@ -144,4 +150,4 @@ <h3>Cheat sheet</h3>
 </script>
 
 </body>
-</html>
+</html>