Doc pass.

docs/pixie.html

@@ -310,7 +310,7 @@ Writes an image to a file.
 <dt><pre><span class="Keyword">proc</span> <a href="#fillRect%2CImage%2CRect%2CColorRGBA"><span class="Identifier">fillRect</span></a><span class="Other">(</span><span class="Identifier">image</span><span class="Other">:</span> <a href="pixie/images.html#Image"><span class="Identifier">Image</span></a><span class="Other">;</span> <span class="Identifier">rect</span><span class="Other">:</span> <span class="Identifier">Rect</span><span class="Other">;</span> <span class="Identifier">color</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill a rectangle.
 
 </dd>
 <a id="fillRect,Mask,Rect"></a>
@@ -318,7 +318,7 @@ Writes an image to a file.
                                         <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill a rectangle.
 
 </dd>
 <a id="strokeRect,Image,Rect,ColorRGBA,float"></a>
@@ -326,7 +326,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a rounded rectangle.
 
 </dd>
 <a id="strokeRect,Mask,Rect,float"></a>
@@ -334,7 +334,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a rounded rectangle.
 
 </dd>
 <a id="fillRoundedRect,Image,Rect,float32,float32,float32,float32,ColorRGBA"></a>
@@ -342,7 +342,7 @@ Writes an image to a file.
                      <span class="Identifier">color</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill a rounded rectangle.
 
 </dd>
 <a id="fillRoundedRect,Image,Rect,float32,ColorRGBA"></a>
@@ -350,7 +350,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill a rounded rectangle.
 
 </dd>
 <a id="fillRoundedRect,Mask,Rect,float32,float32,float32,float32"></a>
@@ -358,7 +358,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill a rounded rectangle.
 
 </dd>
 <a id="fillRoundedRect,Mask,Rect,float32"></a>
@@ -366,7 +366,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill a rounded rectangle.
 
 </dd>
 <a id="strokeRoundedRect,Image,Rect,float32,float32,float32,float32,ColorRGBA,float"></a>
@@ -375,7 +375,7 @@ Writes an image to a file.
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a rounded rectangle.
 
 </dd>
 <a id="strokeRoundedRect,Image,Rect,float32,ColorRGBA,float"></a>
@@ -384,7 +384,7 @@ Writes an image to a file.
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a rounded rectangle.
 
 </dd>
 <a id="strokeRoundedRect,Mask,Rect,float32,float32,float32,float32,float"></a>
@@ -393,7 +393,7 @@ Writes an image to a file.
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a rounded rectangle.
 
 </dd>
 <a id="strokeRoundedRect,Mask,Rect,float32,float"></a>
@@ -402,7 +402,7 @@ Writes an image to a file.
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a rounded rectangle.
 
 </dd>
 <a id="strokeSegment,Image,Segment,ColorRGBA,float"></a>
@@ -410,7 +410,7 @@ Writes an image to a file.
                    <span class="Identifier">strokeWidth</span> <span class="Other">=</span> <span class="FloatNumber">1.0</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a segment (draws a line from segment.at to segment.to).
 
 </dd>
 <a id="strokeSegment,Mask,Segment,float32"></a>
@@ -418,7 +418,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke a segment (draws a line from segment.at to segment.to).
 
 </dd>
 <a id="fillEllipse,Image,Vec2,float32,float32,ColorRGBA"></a>
@@ -426,7 +426,7 @@ Writes an image to a file.
                  <span class="Identifier">blendMode</span> <span class="Other">=</span> <span class="Identifier">bmNormal</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill an ellipse.
 
 </dd>
 <a id="fillEllipse,Mask,Vec2,float32,float32"></a>
@@ -434,7 +434,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fill an ellipse.
 
 </dd>
 <a id="strokeEllipse,Image,Vec2,float32,float32,ColorRGBA,float"></a>
@@ -442,7 +442,7 @@ Writes an image to a file.
                    <span class="Identifier">color</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span><span class="Other">;</span> <span class="Identifier">strokeWidth</span> <span class="Other">=</span> <span class="FloatNumber">1.0</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke an ellipse.
 
 </dd>
 <a id="strokeEllipse,Mask,Vec2,float32,float32,float"></a>
@@ -450,7 +450,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Stroke an ellipse.
 
 </dd>
 <a id="fillCircle,Image,Vec2,float32,ColorRGBA"></a>
@@ -458,7 +458,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fills a circle.
 
 </dd>
 <a id="fillCircle,Mask,Vec2,float32"></a>
@@ -466,7 +466,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fills a circle.
 
 </dd>
 <a id="strokeCircle,Image,Vec2,float32,ColorRGBA,float"></a>
@@ -474,7 +474,7 @@ Writes an image to a file.
                   <span class="Identifier">strokeWidth</span> <span class="Other">=</span> <span class="FloatNumber">1.0</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Strokes a circle.
 
 </dd>
 <a id="strokeCircle,Mask,Vec2,float32,float"></a>
@@ -482,7 +482,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Strokes a circle.
 
 </dd>
 <a id="fillPolygon,Image,Vec2,float32,int,ColorRGBA"></a>
@@ -490,7 +490,7 @@ Writes an image to a file.
                  <span class="Identifier">color</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fills a polygon.
 
 </dd>
 <a id="fillPolygon,Mask,Vec2,float32,int"></a>
@@ -498,7 +498,7 @@ Writes an image to a file.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fills a polygon.
 
 </dd>
 <a id="strokePolygon,Image,Vec2,float32,int,ColorRGBA,float"></a>
@@ -506,7 +506,7 @@ Writes an image to a file.
                    <span class="Identifier">color</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span><span class="Other">;</span> <span class="Identifier">strokeWidth</span> <span class="Other">=</span> <span class="FloatNumber">1.0</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Strokes a polygon.
 
 </dd>
 <a id="strokePolygon,Mask,Vec2,float32,int,float"></a>
@@ -515,7 +515,7 @@ Writes an image to a file.
                                         <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Strokes a polygon.
 
 </dd>
 
@@ -533,7 +533,7 @@ Writes an image to a file.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:57 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:05 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/blends.html

@@ -310,7 +310,7 @@ Unpack the first 32 bits into 4 rgba(0, 0, 0, value)
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:56 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:03 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/common.html

@@ -228,7 +228,7 @@ Converts a color from premultiplied alpha to straight alpha.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:55 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:03 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/fileformats/bmp.html

@@ -185,7 +185,7 @@ Encodes an image into the BMP file format.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:56 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:04 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/fileformats/jpg.html

@@ -185,7 +185,7 @@ Decodes the JPEG into an Image.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:56 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:04 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/fileformats/png.html

@@ -204,7 +204,7 @@ Encodes the mask data into the PNG file format.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:57 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:04 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/fileformats/svg.html

@@ -174,7 +174,7 @@ Render SVG file and return the image.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:57 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:05 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/images.html

@@ -559,7 +559,7 @@ Draws one image onto another using matrix with color blending.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Resize an image to a given hight and width.
 
 </dd>
 <a id="shift,,Vec2"></a>
@@ -579,7 +579,7 @@ Shifts the target by offset.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:56 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:04 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/masks.html

@@ -330,7 +330,7 @@ Fills the mask with the parameter value.
 <dt><pre><span class="Keyword">proc</span> <a href="#getValueSmooth%2CMask%2Cfloat32%2Cfloat32"><span class="Identifier">getValueSmooth</span></a><span class="Other">(</span><span class="Identifier">mask</span><span class="Other">:</span> <a href="masks.html#Mask"><span class="Identifier">Mask</span></a><span class="Other">;</span> <span class="Identifier">x</span><span class="Other">,</span> <span class="Identifier">y</span><span class="Other">:</span> <span class="Identifier">float32</span><span class="Other">)</span><span class="Other">:</span> <span class="Identifier">uint8</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Gets a interpolated value with float point coordinates.
 
 </dd>
 <a id="spread,Mask,float32"></a>
@@ -357,7 +357,7 @@ A value of 0 stays 0. Anything else turns into 255.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:56 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:04 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/paints.html

@@ -108,17 +108,23 @@ window.addEventListener('DOMContentLoaded', main);
   pkGradientAngular">PaintKind</a></li>
   <li><a class="reference" href="#Paint"
     title="Paint = ref object
-  kind*: PaintKind
+  case kind*: PaintKind
-  color*: ColorRGBA
+  of pkSolid:
-  image*: Image
+      color*: ColorRGBA      ## Color to fill with.
-  imageMat*: Mat3
+    
-  gradientHandlePositions*: seq[Vec2]
+  of pkImage, pkImageTiled:
-  gradientStops*: seq[ColorStop]
+      image*: Image          ## Image to fill with.
-  blendMode*: BlendMode">Paint</a></li>
+      imageMat*: Mat3        ## Matrix of the filled image.
+    
+  of pkGradientLinear, pkGradientRadial, pkGradientAngular:
+      gradientHandlePositions*: seq[Vec2] ## Gradient positions (image space).
+      gradientStops*: seq[ColorStop] ## Color stops (gradient space).
+    
+  blendMode*: BlendMode      ## Blend mode.">Paint</a></li>
   <li><a class="reference" href="#ColorStop"
     title="ColorStop = object
-  color*: Color
+  color*: Color              ## Color of the stop
-  position*: float32">ColorStop</a></li>
+  position*: float32         ## Gradient Stop position 0..1.">ColorStop</a></li>
 
   </ul>
 </li>
@@ -182,27 +188,33 @@ window.addEventListener('DOMContentLoaded', main);
 </dd>
 <a id="Paint"></a>
 <dt><pre><a href="paints.html#Paint"><span class="Identifier">Paint</span></a> <span class="Other">=</span> <span class="Keyword">ref</span> <span class="Keyword">object</span>
-  <span class="Identifier">kind</span><span class="Operator">*</span><span class="Other">:</span> <a href="paints.html#PaintKind"><span class="Identifier">PaintKind</span></a>
+  <span class="Keyword">case</span> <span class="Identifier">kind</span><span class="Operator">*</span><span class="Other">:</span> <a href="paints.html#PaintKind"><span class="Identifier">PaintKind</span></a>
-  <span class="Identifier">color</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span>
+  <span class="Keyword">of</span> <span class="Identifier">pkSolid</span><span class="Other">:</span>
-  <span class="Identifier">image</span><span class="Operator">*</span><span class="Other">:</span> <a href="images.html#Image"><span class="Identifier">Image</span></a>
+      <span class="Identifier">color</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">ColorRGBA</span>      <span class="Comment">## Color to fill with.</span>
-  <span class="Identifier">imageMat</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">Mat3</span>
+    
-  <span class="Identifier">gradientHandlePositions</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">seq</span><span class="Other">[</span><span class="Identifier">Vec2</span><span class="Other">]</span>
+  <span class="Keyword">of</span> <span class="Identifier">pkImage</span><span class="Other">,</span> <span class="Identifier">pkImageTiled</span><span class="Other">:</span>
-  <span class="Identifier">gradientStops</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">seq</span><span class="Other">[</span><a href="paints.html#ColorStop"><span class="Identifier">ColorStop</span></a><span class="Other">]</span>
+      <span class="Identifier">image</span><span class="Operator">*</span><span class="Other">:</span> <a href="images.html#Image"><span class="Identifier">Image</span></a>          <span class="Comment">## Image to fill with.</span>
-  <span class="Identifier">blendMode</span><span class="Operator">*</span><span class="Other">:</span> <a href="blends.html#BlendMode"><span class="Identifier">BlendMode</span></a>
+      <span class="Identifier">imageMat</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">Mat3</span>        <span class="Comment">## Matrix of the filled image.</span>
-</pre></dt>
+    
+  <span class="Keyword">of</span> <span class="Identifier">pkGradientLinear</span><span class="Other">,</span> <span class="Identifier">pkGradientRadial</span><span class="Other">,</span> <span class="Identifier">pkGradientAngular</span><span class="Other">:</span>
+      <span class="Identifier">gradientHandlePositions</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">seq</span><span class="Other">[</span><span class="Identifier">Vec2</span><span class="Other">]</span> <span class="Comment">## Gradient positions (image space).</span>
+      <span class="Identifier">gradientStops</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">seq</span><span class="Other">[</span><a href="paints.html#ColorStop"><span class="Identifier">ColorStop</span></a><span class="Other">]</span> <span class="Comment">## Color stops (gradient space).</span>
+    
+  <span class="Identifier">blendMode</span><span class="Operator">*</span><span class="Other">:</span> <a href="blends.html#BlendMode"><span class="Identifier">BlendMode</span></a>      <span class="Comment">## Blend mode.</span>
+  </pre></dt>
 <dd>
 
-
+Paint used to fill paths.
 
 </dd>
 <a id="ColorStop"></a>
 <dt><pre><a href="paints.html#ColorStop"><span class="Identifier">ColorStop</span></a> <span class="Other">=</span> <span class="Keyword">object</span>
-  <span class="Identifier">color</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">Color</span>
+  <span class="Identifier">color</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">Color</span>              <span class="Comment">## Color of the stop</span>
-  <span class="Identifier">position</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">float32</span>
+  <span class="Identifier">position</span><span class="Operator">*</span><span class="Other">:</span> <span class="Identifier">float32</span>         <span class="Comment">## Gradient Stop position 0..1.</span>
-</pre></dt>
+  </pre></dt>
 <dd>
 
-Represents color on a gradient curve.
+Color stop on a gradient curve.
 
 </dd>
 
@@ -215,7 +227,7 @@ Represents color on a gradient curve.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">PixieError</span><span class="Other">,</span> <span class="Identifier">Exception</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Identifier">RootEffect</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Draws and basic image fill.
 
 </dd>
 <a id="fillImageTiled,Image,Image,Mat3"></a>
@@ -223,7 +235,7 @@ Represents color on a gradient curve.
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Draws a tiled image fill.
 
 </dd>
 <a id="fillLinearGradient,Image,Vec2,Vec2,seq[ColorStop]"></a>
@@ -231,7 +243,7 @@ Represents color on a gradient curve.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-Linear gradient.
+Fills a linear gradient.
 
 </dd>
 <a id="fillRadialGradient,Image,Vec2,Vec2,Vec2,seq[ColorStop]"></a>
@@ -239,7 +251,7 @@ Linear gradient.
                         <span class="Identifier">stops</span><span class="Other">:</span> <span class="Identifier">seq</span><span class="Other">[</span><a href="paints.html#ColorStop"><span class="Identifier">ColorStop</span></a><span class="Other">]</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-Radial gradient. start, stop, and skew.
+Fills a radial gradient.
 
 </dd>
 <a id="fillAngularGradient,Image,Vec2,Vec2,Vec2,seq[ColorStop]"></a>
@@ -247,7 +259,7 @@ Radial gradient. start, stop, and skew.
                          <span class="Identifier">stops</span><span class="Other">:</span> <span class="Identifier">seq</span><span class="Other">[</span><a href="paints.html#ColorStop"><span class="Identifier">ColorStop</span></a><span class="Other">]</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Angular gradient.
 
 </dd>
 
@@ -260,7 +272,7 @@ Radial gradient. start, stop, and skew.
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:57 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:05 UTC</small>
       </div>
     </div>
   </div>

docs/pixie/paths.html

@@ -287,7 +287,7 @@ window.addEventListener('DOMContentLoaded', main);
   <span class="Identifier">wrNonZero</span><span class="Other">,</span> <span class="Identifier">wrEvenOdd</span></pre></dt>
 <dd>
 
-
+Winding rules.
 
 </dd>
 <a id="LineCap"></a>
@@ -295,7 +295,7 @@ window.addEventListener('DOMContentLoaded', main);
   <span class="Identifier">lcButt</span><span class="Other">,</span> <span class="Identifier">lcRound</span><span class="Other">,</span> <span class="Identifier">lcSquare</span></pre></dt>
 <dd>
 
-
+Line cap type for strokes.
 
 </dd>
 <a id="LineJoin"></a>
@@ -303,7 +303,7 @@ window.addEventListener('DOMContentLoaded', main);
   <span class="Identifier">ljMiter</span><span class="Other">,</span> <span class="Identifier">ljRound</span><span class="Other">,</span> <span class="Identifier">ljBevel</span></pre></dt>
 <dd>
 
-
+Line join type for strokes.
 
 </dd>
 <a id="PathCommandKind"></a>
@@ -332,7 +332,7 @@ Binary version of an SVG command
 </pre></dt>
 <dd>
 
-
+Used to hold paths and create paths.
 
 </dd>
 <a id="SomePath"></a>
@@ -365,35 +365,35 @@ Adds a path to the current path.
 <dt><pre><span class="Keyword">proc</span> <a href="#closePath%2CPath"><span class="Identifier">closePath</span></a><span class="Other">(</span><span class="Identifier">path</span><span class="Other">:</span> <span class="Keyword">var</span> <a href="paths.html#Path"><span class="Identifier">Path</span></a><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Closes a path (draws a line to the start).
 
 </dd>
 <a id="moveTo,Path,float32,float32"></a>
 <dt><pre><span class="Keyword">proc</span> <a href="#moveTo%2CPath%2Cfloat32%2Cfloat32"><span class="Identifier">moveTo</span></a><span class="Other">(</span><span class="Identifier">path</span><span class="Other">:</span> <span class="Keyword">var</span> <a href="paths.html#Path"><span class="Identifier">Path</span></a><span class="Other">;</span> <span class="Identifier">x</span><span class="Other">,</span> <span class="Identifier">y</span><span class="Other">:</span> <span class="Identifier">float32</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Moves the current drawing pen to a new position and starts a new shape.
 
 </dd>
 <a id="moveTo,Path,Vec2"></a>
 <dt><pre><span class="Keyword">proc</span> <a href="#moveTo%2CPath%2CVec2"><span class="Identifier">moveTo</span></a><span class="Other">(</span><span class="Identifier">path</span><span class="Other">:</span> <span class="Keyword">var</span> <a href="paths.html#Path"><span class="Identifier">Path</span></a><span class="Other">;</span> <span class="Identifier">v</span><span class="Other">:</span> <span class="Identifier">Vec2</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">inline</span><span class="Other">,</span> <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Moves the current drawing pen to a new position and starts a new shape.
 
 </dd>
 <a id="lineTo,Path,float32,float32"></a>
 <dt><pre><span class="Keyword">proc</span> <a href="#lineTo%2CPath%2Cfloat32%2Cfloat32"><span class="Identifier">lineTo</span></a><span class="Other">(</span><span class="Identifier">path</span><span class="Other">:</span> <span class="Keyword">var</span> <a href="paths.html#Path"><span class="Identifier">Path</span></a><span class="Other">;</span> <span class="Identifier">x</span><span class="Other">,</span> <span class="Identifier">y</span><span class="Other">:</span> <span class="Identifier">float32</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a line.
 
 </dd>
 <a id="lineTo,Path,Vec2"></a>
 <dt><pre><span class="Keyword">proc</span> <a href="#lineTo%2CPath%2CVec2"><span class="Identifier">lineTo</span></a><span class="Other">(</span><span class="Identifier">path</span><span class="Other">:</span> <span class="Keyword">var</span> <a href="paths.html#Path"><span class="Identifier">Path</span></a><span class="Other">;</span> <span class="Identifier">v</span><span class="Other">:</span> <span class="Identifier">Vec2</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">inline</span><span class="Other">,</span> <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a line.
 
 </dd>
 <a id="bezierCurveTo,Path,float32,float32,float32,float32,float32,float32"></a>
@@ -425,7 +425,7 @@ Adds a quadratic Bézier curve to the path. This requires 2 points. The first po
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a quadratic Bézier curve to the path. This requires 2 points. The first point is the control point and the second is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the curve. 
 
 </dd>
 <a id="arcTo,Path,Vec2,Vec2,float32"></a>
@@ -450,7 +450,7 @@ Adds a circular arc to the current sub-path, using the given control points and
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds an elliptical arc to the current sub-path, using the given radius ratios, sweep flags, and end position.
 
 </dd>
 <a id="rect,Path,float32,float32,float32,float32"></a>
@@ -466,7 +466,7 @@ Adds a circular arc to the current sub-path, using the given control points and
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a rectangle. Clockwise param can be used to subtract a rect from a path using even-odd.
 
 </dd>
 <a id="rect,Path,Rect"></a>
@@ -474,7 +474,7 @@ Adds a circular arc to the current sub-path, using the given control points and
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a rectangle. Clockwise param can be used to subtract a rect from a path using even-odd.
 
 </dd>
 <a id="roundedRect,Path,float32,float32,float32,float32,float32,float32,float32,float32"></a>
@@ -482,7 +482,7 @@ Adds a circular arc to the current sub-path, using the given control points and
                  <span class="Identifier">clockwise</span> <span class="Other">=</span> <span class="Identifier">true</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a rounded rectangle. Clockwise param can be used to subtract a rect from a path using even-odd.
 
 </dd>
 <a id="roundedRect,Path,Vec2,Vec2,float32,float32,float32,float32"></a>
@@ -490,7 +490,7 @@ Adds a circular arc to the current sub-path, using the given control points and
                  <span class="Identifier">clockwise</span> <span class="Other">=</span> <span class="Identifier">true</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">inline</span><span class="Other">,</span> <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a rounded rectangle. Clockwise param can be used to subtract a rect from a path using even-odd.
 
 </dd>
 <a id="roundedRect,Path,Rect,float32,float32,float32,float32"></a>
@@ -498,14 +498,14 @@ Adds a circular arc to the current sub-path, using the given control points and
                  <span class="Identifier">clockwise</span> <span class="Other">=</span> <span class="Identifier">true</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">inline</span><span class="Other">,</span> <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a rounded rectangle. Clockwise param can be used to subtract a rect from a path using even-odd.
 
 </dd>
 <a id="ellipse,Path,float32,float32,float32,float32"></a>
 <dt><pre><span class="Keyword">proc</span> <a href="#ellipse%2CPath%2Cfloat32%2Cfloat32%2Cfloat32%2Cfloat32"><span class="Identifier">ellipse</span></a><span class="Other">(</span><span class="Identifier">path</span><span class="Other">:</span> <span class="Keyword">var</span> <a href="paths.html#Path"><span class="Identifier">Path</span></a><span class="Other">;</span> <span class="Identifier">cx</span><span class="Other">,</span> <span class="Identifier">cy</span><span class="Other">,</span> <span class="Identifier">rx</span><span class="Other">,</span> <span class="Identifier">ry</span><span class="Other">:</span> <span class="Identifier">float32</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a ellipse.
 
 </dd>
 <a id="ellipse,Path,Vec2,float32,float32"></a>
@@ -513,7 +513,7 @@ Adds a circular arc to the current sub-path, using the given control points and
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Adds a ellipse.
 
 </dd>
 <a id="polygon,Path,float32,float32,float32,int"></a>
@@ -521,7 +521,7 @@ Adds a circular arc to the current sub-path, using the given control points and
     <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-Draws a n sided regular polygon at (x, y) with size.
+Draws a n-sided regular polygon at (x, y) with a size.
 
 </dd>
 <a id="polygon,Path,Vec2,float32,int"></a>
@@ -529,7 +529,7 @@ Draws a n sided regular polygon at (x, y) with size.
     <span class="Identifier">raises</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span><span class="Other">,</span> <span class="Identifier">tags</span><span class="Other">:</span> <span class="Other">[</span><span class="Other">]</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Draws a n-sided regular polygon at (x, y) with a size.
 
 </dd>
 <a id="fillPath,Image,SomePath,ColorRGBA"></a>
@@ -537,7 +537,7 @@ Draws a n sided regular polygon at (x, y) with size.
               <span class="Identifier">windingRule</span> <span class="Other">=</span> <span class="Identifier">wrNonZero</span><span class="Other">;</span> <span class="Identifier">blendMode</span> <span class="Other">=</span> <span class="Identifier">bmNormal</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">inline</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fills a path.
 
 </dd>
 <a id="fillPath,Image,SomePath,ColorRGBA,"></a>
@@ -546,14 +546,14 @@ Draws a n sided regular polygon at (x, y) with size.
               <span class="Identifier">blendMode</span> <span class="Other">=</span> <span class="Identifier">bmNormal</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Fills a path.
 
 </dd>
 <a id="fillPath,Mask,SomePath"></a>
 <dt><pre><span class="Keyword">proc</span> <a href="#fillPath%2CMask%2CSomePath"><span class="Identifier">fillPath</span></a><span class="Other">(</span><span class="Identifier">mask</span><span class="Other">:</span> <a href="masks.html#Mask"><span class="Identifier">Mask</span></a><span class="Other">;</span> <span class="Identifier">path</span><span class="Other">:</span> <a href="paths.html#SomePath"><span class="Identifier">SomePath</span></a><span class="Other">;</span> <span class="Identifier">windingRule</span> <span class="Other">=</span> <span class="Identifier">wrNonZero</span><span class="Other">)</span> <span><span class="Other">{</span><span class="Other pragmadots">...</span><span class="Other">}</span></span><span class="pragmawrap"><span class="Other">{.</span><span class="pragma"><span class="Identifier">inline</span></span><span class="Other">.}</span></span></pre></dt>
 <dd>
 
-
+Fills a path.
 
 </dd>
 <a id="fillPath,Mask,SomePath,"></a>
@@ -561,7 +561,7 @@ Draws a n sided regular polygon at (x, y) with size.
               <span class="Identifier">windingRule</span> <span class="Other">=</span> <span class="Identifier">wrNonZero</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Fills a path.
 
 </dd>
 <a id="fillPath,Image,SomePath,Paint"></a>
@@ -569,7 +569,7 @@ Draws a n sided regular polygon at (x, y) with size.
               <span class="Identifier">windingRule</span> <span class="Other">=</span> <span class="Identifier">wrNonZero</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Fills a path.
 
 </dd>
 <a id="strokePath,Image,SomePath,ColorRGBA,float"></a>
@@ -578,7 +578,7 @@ Draws a n sided regular polygon at (x, y) with size.
                 <span class="Identifier">blendMode</span> <span class="Other">=</span> <span class="Identifier">bmNormal</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Strokes a path.
 
 </dd>
 <a id="strokePath,Image,SomePath,ColorRGBA,,float"></a>
@@ -587,7 +587,7 @@ Draws a n sided regular polygon at (x, y) with size.
                 <span class="Identifier">lineJoin</span> <span class="Other">=</span> <span class="Identifier">ljMiter</span><span class="Other">;</span> <span class="Identifier">blendMode</span> <span class="Other">=</span> <span class="Identifier">bmNormal</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Strokes a path.
 
 </dd>
 <a id="strokePath,Mask,SomePath,float"></a>
@@ -595,7 +595,7 @@ Draws a n sided regular polygon at (x, y) with size.
                 <span class="Identifier">lineJoin</span> <span class="Other">=</span> <span class="Identifier">ljMiter</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Strokes a path.
 
 </dd>
 <a id="strokePath,Mask,SomePath,,float"></a>
@@ -603,7 +603,7 @@ Draws a n sided regular polygon at (x, y) with size.
                 <span class="Identifier">strokeWidth</span> <span class="Other">=</span> <span class="FloatNumber">1.0</span><span class="Other">;</span> <span class="Identifier">lineCap</span> <span class="Other">=</span> <span class="Identifier">lcButt</span><span class="Other">;</span> <span class="Identifier">lineJoin</span> <span class="Other">=</span> <span class="Identifier">ljMiter</span><span class="Other">)</span></pre></dt>
 <dd>
 
-
+Strokes a path.
 
 </dd>
 
@@ -628,7 +628,7 @@ Return elements in pairs: (1st, 2nd), (2nd, 3rd) ... (n - 1, last).
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:57 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:05 UTC</small>
       </div>
     </div>
   </div>

docs/theindex.html

@@ -917,7 +917,7 @@ window.addEventListener('DOMContentLoaded', main);
       <div class="twelve-columns footer">
         <span class="nim-sprite"></span>
         <br/>
-        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:22:57 UTC</small>
+        <small style="color: var(--hint);">Made with Nim. Generated: 2021-02-25 14:52:05 UTC</small>
       </div>
     </div>
   </div>

src/pixie/images.nim

@@ -804,31 +804,39 @@ proc draw*(a, b: Image, mat: Mat3, blendMode = bmNormal) {.inline.} =
   a.drawUber(b, mat, blendMode)
 
 proc draw*(a, b: Image, pos = vec2(0, 0), blendMode = bmNormal) {.inline.} =
+  # Draws one image onto another using a position offset with color blending.
   a.draw(b, translate(pos), blendMode)
 
 proc draw*(image: Image, mask: Mask, mat: Mat3, blendMode = bmMask) {.inline.} =
+  # Draws a mask onto an image using a matrix with color blending.
   image.drawUber(mask, mat, blendMode)
 
 proc draw*(
   image: Image, mask: Mask, pos = vec2(0, 0), blendMode = bmMask
 ) {.inline.} =
+  # Draws a mask onto an image using a position offset with color blending.
   image.drawUber(mask, translate(pos), blendMode)
 
 proc draw*(a, b: Mask, mat: Mat3, blendMode = bmMask) {.inline.} =
+  # Draws a mask onto a mask using a matrix with color blending.
   a.drawUber(b, mat, blendMode)
 
 proc draw*(a, b: Mask, pos = vec2(0, 0), blendMode = bmMask) {.inline.} =
+  # Draws a mask onto a mask using a position offset with color blending.
   a.draw(b, translate(pos), blendMode)
 
 proc draw*(mask: Mask, image: Image, mat: Mat3, blendMode = bmMask) {.inline.} =
+  # Draws a image onto a mask using a matrix with color blending.
   mask.drawUber(image, mat, blendMode)
 
 proc draw*(
   mask: Mask, image: Image, pos = vec2(0, 0), blendMode = bmMask
 ) {.inline.} =
+  # Draws a image onto a mask using a position offset with color blending.
   mask.draw(image, translate(pos), blendMode)
 
 proc resize*(srcImage: Image, width, height: int): Image =
+  ## Resize an image to a given hight and width.
   if width == srcImage.width and height == srcImage.height:
     result = srcImage.copy()
   else:

src/pixie/masks.nim

@@ -94,6 +94,7 @@ proc fill*(mask: Mask, value: uint8) {.inline.} =
   fillUnsafe(mask.data, value, 0, mask.data.len)
 
 proc getValueSmooth*(mask: Mask, x, y: float32): uint8 =
+  ## Gets a interpolated value with float point coordinates.
   let
     minX = floor(x)
     minY = floor(y)

src/pixie/paints.nim

@@ -10,24 +10,29 @@ type
     pkGradientAngular
 
   Paint* = ref object
-    kind*: PaintKind
+    ## Paint used to fill paths.
-    color*: ColorRGBA
+    case kind*: PaintKind
-    image*: Image
+    of pkSolid:
-    imageMat*: Mat3
+      color*: ColorRGBA                    ## Color to fill with.
-    gradientHandlePositions*: seq[Vec2]
+    of pkImage, pkImageTiled:
-    gradientStops*: seq[ColorStop]
+      image*: Image                        ## Image to fill with.
-    blendMode*: BlendMode
+      imageMat*: Mat3                      ## Matrix of the filled image.
+    of pkGradientLinear, pkGradientRadial, pkGradientAngular:
+      gradientHandlePositions*: seq[Vec2]  ## Gradient positions (image space).
+      gradientStops*: seq[ColorStop]       ## Color stops (gradient space).
+    blendMode*: BlendMode                  ## Blend mode.
 
   ColorStop* = object
-    ## Represents color on a gradient curve.
+    ## Color stop on a gradient curve.
-    color*: Color
+    color*: Color                         ## Color of the stop
-    position*: float32
+    position*: float32                    ## Gradient Stop position 0..1.
 
 proc fillImage*(
   dest: Image,
   src: Image,
   mat: Mat3
 ) =
+  ## Draws and basic image fill.
   dest.draw(
     src,
     mat
@@ -38,6 +43,7 @@ proc fillImageTiled*(
   src: Image,
   mat: Mat3
 ) =
+  ## Draws a tiled image fill.
   var
     matInv = mat.inverse()
     src = src
@@ -102,7 +108,7 @@ proc fillLinearGradient*(
   at, to: Vec2,
   stops: seq[ColorStop]
 ) =
-  ## Linear gradient.
+  ## Fills a linear gradient.
   for y in 0 ..< image.height:
     for x in 0 ..< image.width:
       let xy = vec2(x.float32, y.float32)
@@ -114,8 +120,7 @@ proc fillRadialGradient*(
   center, edge, skew: Vec2,
   stops: seq[ColorStop]
 ) =
-  ## Radial gradient.
+  ## Fills a radial gradient.
-  ## start, stop, and skew.
   let
     distanceX = dist(center, edge)
     distanceY = dist(center, skew)
@@ -136,6 +141,7 @@ proc fillAngularGradient*(
   center, edge, skew: Vec2,
   stops: seq[ColorStop]
 ) =
+  ## Angular gradient.
   # TODO: make edge between start and end anti-aliased.
   let
     gradientAngle = normalize(edge - center).angle().fixAngle()

src/pixie/paths.nim

@@ -5,13 +5,16 @@ when defined(amd64) and not defined(pixieNoSimd):
 
 type
   WindingRule* = enum
+    ## Winding rules.
     wrNonZero
     wrEvenOdd
 
   LineCap* = enum
+    ## Line cap type for strokes.
     lcButt, lcRound, lcSquare
 
   LineJoin* = enum
+    ## Line join type for strokes.
     ljMiter, ljRound, ljBevel
 
   PathCommandKind* = enum
@@ -26,23 +29,26 @@ type
     numbers*: seq[float32]
 
   Path* = object
+    ## Used to hold paths and create paths.
     commands*: seq[PathCommand]
     start, at: Vec2 # Maintained by moveTo, lineTo, etc. Used by arcTo.
 
   SomePath* = Path | string | seq[seq[Vec2]]
 
-const epsilon = 0.0001 * PI
+const epsilon = 0.0001 * PI  ## Tiny value used for some computations.
 
 when defined(release):
   {.push checks: off.}
 
 proc maxScale(m: Mat3): float32 =
+  ## What is the largest scale of this matrix.
   max(
     vec2(m[0, 0], m[0, 1]).length,
     vec2(m[1, 0], m[1, 1]).length
   )
 
 proc parameterCount(kind: PathCommandKind): int =
+  ## Returns number of parameters a path command has.
   case kind:
   of Close: 0
   of Move, Line, RMove, RLine, TQuad, RTQuad: 2
@@ -52,6 +58,7 @@ proc parameterCount(kind: PathCommandKind): int =
   of Arc, RArc: 7
 
 proc `$`*(path: Path): string =
+  ## Turn path int into a string.
   for i, command in path.commands:
     case command.kind
     of Move: result.add "M"
@@ -222,6 +229,7 @@ proc parsePath*(path: string): Path =
   finishCommand(result)
 
 proc transform*(path: var Path, mat: Mat3) =
+  ## Apply a matrix transform to a path.
   for command in path.commands.mitems:
     case command.kind:
     of Close:
@@ -280,22 +288,27 @@ proc addPath*(path: var Path, other: Path) =
   path.commands.add(other.commands)
 
 proc closePath*(path: var Path) =
+  ## Closes a path (draws a line to the start).
   path.commands.add(PathCommand(kind: Close))
   path.at = path.start
 
 proc moveTo*(path: var Path, x, y: float32) =
+  ## Moves the current drawing pen to a new position and starts a new shape.
   path.commands.add(PathCommand(kind: Move, numbers: @[x, y]))
   path.start = vec2(x, y)
   path.at = path.start
 
 proc moveTo*(path: var Path, v: Vec2) {.inline.} =
+  ## Moves the current drawing pen to a new position and starts a new shape.
   path.moveTo(v.x, v.y)
 
 proc lineTo*(path: var Path, x, y: float32) =
+  ## Adds a line.
   path.commands.add(PathCommand(kind: Line, numbers: @[x, y]))
   path.at = vec2(x, y)
 
 proc lineTo*(path: var Path, v: Vec2) {.inline.} =
+  ## Adds a line.
   path.lineTo(v.x, v.y)
 
 proc bezierCurveTo*(path: var Path, x1, y1, x2, y2, x3, y3: float32) =
@@ -324,6 +337,11 @@ proc quadraticCurveTo*(path: var Path, x1, y1, x2, y2: float32) =
   path.at = vec2(x2, y2)
 
 proc quadraticCurveTo*(path: var Path, ctrl, to: Vec2) {.inline.} =
+  ## Adds a quadratic Bézier curve to the path. This requires 2 points.
+  ## The first point is the control point and the second is the end point.
+  ## The starting point is the last point in the current path, which can be
+  ## changed using moveTo() before creating the curve.
+  ##
   path.quadraticCurveTo(ctrl.x, ctrl.y, to.x, to.y)
 
 proc arcTo*(path: var Path, ctrl1, ctrl2: Vec2, radius: float32) {.inline.} =
@@ -390,6 +408,8 @@ proc ellipticalArcTo*(
   largeArcFlag, sweepFlag: bool,
   x, y: float32
 ) =
+  ## Adds an elliptical arc to the current sub-path, using the given radius
+  ## ratios, sweep flags, and end position.
   path.commands.add(PathCommand(
     kind: Arc,
     numbers: @[
@@ -413,9 +433,13 @@ proc rect*(path: var Path, x, y, w, h: float32, clockwise = true) =
     path.closePath()
 
 proc rect*(path: var Path, pos: Vec2, wh: Vec2, clockwise = true) {.inline.} =
+  ## Adds a rectangle.
+  ## Clockwise param can be used to subtract a rect from a path using even-odd.
   path.rect(pos.x, pos.y, wh.x, wh.y, clockwise)
 
 proc rect*(path: var Path, rect: Rect, clockwise = true) {.inline.} =
+  ## Adds a rectangle.
+  ## Clockwise param can be used to subtract a rect from a path using even-odd.
   path.rect(rect.x, rect.y, rect.w, rect.h, clockwise)
 
 const splineCircleK = 4.0 * (-1.0 + sqrt(2.0)) / 3
@@ -425,6 +449,8 @@ const splineCircleK = 4.0 * (-1.0 + sqrt(2.0)) / 3
 proc roundedRect*(
   path: var Path, x, y, w, h, nw, ne, se, sw: float32, clockwise = true
 ) =
+  ## Adds a rounded rectangle.
+  ## Clockwise param can be used to subtract a rect from a path using even-odd.
   let
     s = splineCircleK
 
@@ -478,14 +504,19 @@ proc roundedRect*(
 proc roundedRect*(
   path: var Path, pos, wh: Vec2, nw, ne, se, sw: float32, clockwise = true
 ) {.inline.} =
+  ## Adds a rounded rectangle.
+  ## Clockwise param can be used to subtract a rect from a path using even-odd.
   path.roundedRect(pos.x, pos.y, wh.x, wh.y, nw, ne, se, sw, clockwise)
 
 proc roundedRect*(
   path: var Path, rect: Rect, nw, ne, se, sw: float32, clockwise = true
 ) {.inline.} =
+  ## Adds a rounded rectangle.
+  ## Clockwise param can be used to subtract a rect from a path using even-odd.
   path.roundedRect(rect.x, rect.y, rect.w, rect.h, nw, ne, se, sw, clockwise)
 
 proc ellipse*(path: var Path, cx, cy, rx, ry: float32) =
+  ## Adds a ellipse.
   let
     magicX = splineCircleK * rx
     magicY = splineCircleK * ry
@@ -498,10 +529,11 @@ proc ellipse*(path: var Path, cx, cy, rx, ry: float32) =
   path.closePath()
 
 proc ellipse*(path: var Path, center: Vec2, rx, ry: float32) {.inline.} =
+  ## Adds a ellipse.
   path.ellipse(center.x, center.y, rx, ry)
 
 proc polygon*(path: var Path, x, y, size: float32, sides: int) =
-  ## Draws a n sided regular polygon at (x, y) with size.
+  ## Draws a n-sided regular polygon at (x, y) with a size.
   path.moveTo(x + size * cos(0.0), y + size * sin(0.0))
   for side in 0 .. sides:
     path.lineTo(
@@ -510,6 +542,7 @@ proc polygon*(path: var Path, x, y, size: float32, sides: int) =
     )
 
 proc polygon*(path: var Path, pos: Vec2, size: float32, sides: int) {.inline.} =
+  ## Draws a n-sided regular polygon at (x, y) with a size.
   path.polygon(pos.x, pos.y, size, sides)
 
 proc commandsToShapes*(path: Path, pixelScale: float32 = 1.0): seq[seq[Vec2]] =
@@ -535,7 +568,7 @@ proc commandsToShapes*(path: Path, pixelScale: float32 = 1.0): seq[seq[Vec2]] =
       shape.add(to)
 
   proc addCubic(shape: var seq[Vec2], at, ctrl1, ctrl2, to: Vec2) =
-
+    ## Adds cubic segments to shape.
     proc compute(at, ctrl1, ctrl2, to: Vec2, t: float32): Vec2 {.inline.} =
       pow(1 - t, 3) * at +
       pow(1 - t, 2) * 3 * t * ctrl1 +
@@ -565,7 +598,7 @@ proc commandsToShapes*(path: Path, pixelScale: float32 = 1.0): seq[seq[Vec2]] =
     shape.discretize(1, 1)
 
   proc addQuadratic(shape: var seq[Vec2], at, ctrl, to: Vec2) =
-
+    ## Adds quadratic segments to shape.
     proc compute(at, ctrl, to: Vec2, t: float32): Vec2 {.inline.} =
       pow(1 - t, 2) * at +
       2 * (1 - t) * t * ctrl +
@@ -600,6 +633,7 @@ proc commandsToShapes*(path: Path, pixelScale: float32 = 1.0): seq[seq[Vec2]] =
     large, sweep: bool,
     to: Vec2
   ) =
+    ## Adds arc segments to shape.
     type ArcParams = object
       radii: Vec2
       rotMat: Mat3
@@ -876,6 +910,7 @@ iterator segments*(s: seq[Vec2]): Segment =
     yield(segment(s[i], s[i + 1]))
 
 proc quickSort(a: var seq[(float32, int16)], inl, inr: int) =
+  ## Quick sorts inline faster then standard lib.
   var
     r = inr
     l = inl
@@ -896,6 +931,7 @@ proc quickSort(a: var seq[(float32, int16)], inl, inr: int) =
   quickSort(a, l, inr)
 
 proc computeBounds(partitions: seq[seq[(Segment, int16)]]): Rect =
+  ## Compute bounds of a shape segments with windings.
   var
     xMin = float32.high
     xMax = float32.low
@@ -919,6 +955,7 @@ proc computeBounds(partitions: seq[seq[(Segment, int16)]]): Rect =
   result.h = yMax - yMin
 
 proc shouldFill(windingRule: WindingRule, count: int): bool {.inline.} =
+  ## Should we fill based on the current winding rule and count?
   case windingRule:
   of wrNonZero:
     count != 0
@@ -1361,6 +1398,7 @@ proc strokeShapes(
 proc parseSomePath(
   path: SomePath, pixelScale: float32 = 1.0
 ): seq[seq[Vec2]] {.inline.} =
+  ## Given SomePath, parse it in different ways.
   when type(path) is string:
     parsePath(path).commandsToShapes(pixelScale)
   elif type(path) is Path:
@@ -1375,6 +1413,7 @@ proc fillPath*(
   windingRule = wrNonZero,
   blendMode = bmNormal
 ) {.inline.} =
+  ## Fills a path.
   image.fillShapes(parseSomePath(path), color, windingRule, blendMode)
 
 proc fillPath*(
@@ -1385,6 +1424,7 @@ proc fillPath*(
   windingRule = wrNonZero,
   blendMode = bmNormal
 ) =
+  ## Fills a path.
   when type(transform) is Mat3:
     let pixelScale = transform.maxScale()
   else:
@@ -1403,6 +1443,7 @@ proc fillPath*(
   path: SomePath,
   windingRule = wrNonZero
 ) {.inline.} =
+  ## Fills a path.
   mask.fillShapes(parseSomePath(path), windingRule)
 
 proc fillPath*(
@@ -1411,6 +1452,7 @@ proc fillPath*(
   transform: Vec2 | Mat3,
   windingRule = wrNonZero
 ) =
+  ## Fills a path.
   when type(transform) is Mat3:
     let pixelScale = transform.maxScale()
   else:
@@ -1430,6 +1472,7 @@ proc fillPath*(
   paint: Paint,
   windingRule = wrNonZero,
 ) =
+  ## Fills a path.
   var mask = newMask(image.width, image.height)
   var fill = newImage(image.width, image.height)
   mask.fillPath(parseSomePath(path), windingRule)
@@ -1480,6 +1523,7 @@ proc strokePath*(
   lineJoin = ljMiter,
   blendMode = bmNormal
 ) =
+  ## Strokes a path.
   let strokeShapes = strokeShapes(
     parseSomePath(path), strokeWidth, lineCap, lineJoin
   )
@@ -1495,6 +1539,7 @@ proc strokePath*(
   lineJoin = ljMiter,
   blendMode = bmNormal
 ) =
+  ## Strokes a path.
   when type(transform) is Mat3:
     let pixelScale = transform.maxScale()
   else:
@@ -1517,6 +1562,7 @@ proc strokePath*(
   lineCap = lcButt,
   lineJoin = ljMiter
 ) =
+  ## Strokes a path.
   let strokeShapes = strokeShapes(
     parseSomePath(path), strokeWidth, lineCap, lineJoin
   )
@@ -1530,6 +1576,7 @@ proc strokePath*(
   lineCap = lcButt,
   lineJoin = ljMiter
 ) =
+  ## Strokes a path.
   when type(transform) is Mat3:
     let pixelScale = transform.maxScale()
   else: