git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_BezierSignature.js.html

   1 <html><head><title>/home/alan/gitlive/roojs1/Roo/bootstrap/BezierSignature.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
   2  * @class Roo.bootstrap.BezierSignature
   3  * @extends Roo.bootstrap.Component
   4  * Bootstrap BezierSignature class
   5  * This script refer to:
   6  *    Title: Signature Pad
   7  *    Author: szimek
   8  *    Availability: https://github.com/szimek/signature_pad
   9  *
  10  * @constructor
  11  * Create a new BezierSignature
  12  * @param {Object} config The config object
  13  */
  14
  15 </span><span class="jsdoc-var">Roo.bootstrap.BezierSignature </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  16     </span><span class="jsdoc-var">Roo.bootstrap.BezierSignature.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  17     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  18         </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  19     </span><span class="jsdoc-syntax">});
  20 };
  21
  22 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.BezierSignature</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,
  23 {
  24
  25     </span><span class="jsdoc-var">curve_data</span><span class="jsdoc-syntax">: [],
  26
  27     </span><span class="jsdoc-var">is_empty</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  28
  29     </span><span class="jsdoc-var">mouse_btn_down</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  30
  31     </span><span class="jsdoc-comment">/**
  32      * @cfg {int} canvas height
  33      */
  34     </span><span class="jsdoc-var">canvas_height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'200px'</span><span class="jsdoc-syntax">,
  35
  36     </span><span class="jsdoc-comment">/**
  37      * @cfg {float|function} Radius of a single dot.
  38      */
  39     </span><span class="jsdoc-var">dot_size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  40
  41     </span><span class="jsdoc-comment">/**
  42      * @cfg {float} Minimum width of a line. Defaults to 0.5.
  43      */
  44     </span><span class="jsdoc-var">min_width</span><span class="jsdoc-syntax">: 0.5,
  45
  46     </span><span class="jsdoc-comment">/**
  47      * @cfg {float} Maximum width of a line. Defaults to 2.5.
  48      */
  49     </span><span class="jsdoc-var">max_width</span><span class="jsdoc-syntax">: 2.5,
  50
  51     </span><span class="jsdoc-comment">/**
  52      * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
  53      */
  54     </span><span class="jsdoc-var">throttle</span><span class="jsdoc-syntax">: 16,
  55
  56     </span><span class="jsdoc-comment">/**
  57      * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
  58      */
  59     </span><span class="jsdoc-var">min_distance</span><span class="jsdoc-syntax">: 5,
  60
  61     </span><span class="jsdoc-comment">/**
  62      * @cfg {string} Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to &quot;rgba(0,0,0,0)&quot; (transparent black). Use a non-transparent color e.g. &quot;rgb(255,255,255)&quot; (opaque white) if you'd like to save signatures as JPEG images.
  63      */
  64     </span><span class="jsdoc-var">bg_color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'rgba(0, 0, 0, 0)'</span><span class="jsdoc-syntax">,
  65
  66     </span><span class="jsdoc-comment">/**
  67      * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to &quot;black&quot;.
  68      */
  69     </span><span class="jsdoc-var">dot_color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'black'</span><span class="jsdoc-syntax">,
  70
  71     </span><span class="jsdoc-comment">/**
  72      * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
  73      */
  74     </span><span class="jsdoc-var">velocity_filter_weight</span><span class="jsdoc-syntax">: 0.7,
  75
  76     </span><span class="jsdoc-comment">/**
  77      * @cfg {function} Callback when stroke begin.
  78      */
  79     </span><span class="jsdoc-var">onBegin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  80
  81     </span><span class="jsdoc-comment">/**
  82      * @cfg {function} Callback when stroke end.
  83      */
  84     </span><span class="jsdoc-var">onEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  85
  86     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  87     {
  88         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-signature column'</span><span class="jsdoc-syntax">;
  89
  90         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
  91             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
  92         }
  93
  94         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">col_sizes </span><span class="jsdoc-syntax">= [
  95             </span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">,
  96             </span><span class="jsdoc-string">'md'</span><span class="jsdoc-syntax">,
  97             </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,
  98             </span><span class="jsdoc-string">'xs'
  99         </span><span class="jsdoc-syntax">];
 100
 101         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">col_sizes.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 102             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col_sizes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]) {
 103                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot; col-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">col_sizes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]+</span><span class="jsdoc-string">&quot;-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col_sizes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]];
 104             }
 105         }
 106
 107         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
 108             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 109             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
 110             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 111                 {
 112                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 113                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-signature-body'</span><span class="jsdoc-syntax">,
 114                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 115                         {
 116                             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,
 117                             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-signature-body-canvas'</span><span class="jsdoc-syntax">,
 118                             </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.canvas_height</span><span class="jsdoc-syntax">,
 119                             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.canvas_width
 120                         </span><span class="jsdoc-syntax">}
 121                     ]
 122                 },
 123                 {
 124                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
 125                     </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'file'</span><span class="jsdoc-syntax">,
 126                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display: none'
 127                 </span><span class="jsdoc-syntax">}
 128             ]
 129         };
 130
 131         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 132     },
 133
 134     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 135     {
 136         </span><span class="jsdoc-var">Roo.bootstrap.BezierSignature.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 137
 138         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">();
 139
 140         </span><span class="jsdoc-comment">// mouse &amp;&amp; touch event swapping...
 141         </span><span class="jsdoc-var">canvas.dom.style.touchAction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
 142         </span><span class="jsdoc-var">canvas.dom.style.msTouchAction </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">;
 143
 144         </span><span class="jsdoc-var">this.mouse_btn_down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 145         </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 146         </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 147         </span><span class="jsdoc-var">Roo.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 148
 149         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">window.PointerEvent</span><span class="jsdoc-syntax">) {
 150             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pointerdown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 151             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pointermove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 152             </span><span class="jsdoc-var">Roo.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pointerup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 153         }
 154
 155         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'ontouchstart' </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">window</span><span class="jsdoc-syntax">) {
 156             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleTouchStart</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 157             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchmove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleTouchMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 158             </span><span class="jsdoc-var">canvas.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this._handleTouchEnd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 159         }
 160
 161         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 162
 163         </span><span class="jsdoc-comment">// file input event
 164         </span><span class="jsdoc-var">this.fileEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'change'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.uploadImage</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 165
 166         </span><span class="jsdoc-var">this.clear</span><span class="jsdoc-syntax">();
 167
 168         </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
 169     },
 170
 171     </span><span class="jsdoc-var">resize</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 172
 173         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
 174         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
 175         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img_data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 176
 177         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">&gt; 0) {
 178             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img_data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ctx.getImageData</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">canvas.height</span><span class="jsdoc-syntax">);
 179         }
 180         </span><span class="jsdoc-comment">// setting canvas width will clean img data
 181         </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= 0;
 182
 183         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.getComputedStyle </span><span class="jsdoc-syntax">?
 184             </span><span class="jsdoc-var">getComputedStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.el.dom.currentStyle</span><span class="jsdoc-syntax">;
 185
 186         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padding_left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style.paddingLeft</span><span class="jsdoc-syntax">) || 0;
 187         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padding_right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style.paddingRight</span><span class="jsdoc-syntax">) || 0;
 188
 189         </span><span class="jsdoc-var">canvas.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.dom.clientWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">padding_left </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">padding_right</span><span class="jsdoc-syntax">;
 190
 191         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img_data</span><span class="jsdoc-syntax">) {
 192             </span><span class="jsdoc-var">ctx.putImageData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img_data</span><span class="jsdoc-syntax">, 0, 0);
 193         }
 194     },
 195
 196     </span><span class="jsdoc-var">_handleMouseDown</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 197     {
 198         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.which </span><span class="jsdoc-syntax">=== 1) {
 199             </span><span class="jsdoc-var">this.mouse_btn_down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 200             </span><span class="jsdoc-var">this.strokeBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 201         }
 202     },
 203
 204     </span><span class="jsdoc-var">_handleMouseMove</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 205     {
 206         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.mouse_btn_down</span><span class="jsdoc-syntax">) {
 207             </span><span class="jsdoc-var">this.strokeMoveUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 208         }
 209     },
 210
 211     </span><span class="jsdoc-var">_handleMouseUp</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 212     {
 213         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.which </span><span class="jsdoc-syntax">=== 1 &amp;&amp; </span><span class="jsdoc-var">this.mouse_btn_down</span><span class="jsdoc-syntax">) {
 214             </span><span class="jsdoc-var">this.mouse_btn_down </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 215             </span><span class="jsdoc-var">this.strokeEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 216         }
 217     },
 218
 219     </span><span class="jsdoc-var">_handleTouchStart</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 220
 221         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 222         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.browserEvent.targetTouches.length </span><span class="jsdoc-syntax">=== 1) {
 223             </span><span class="jsdoc-comment">// var touch = e.browserEvent.changedTouches[0];
 224             // this.strokeBegin(touch);
 225
 226              </span><span class="jsdoc-var">this.strokeBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// assume e catching the correct xy...
 227         </span><span class="jsdoc-syntax">}
 228     },
 229
 230     </span><span class="jsdoc-var">_handleTouchMove</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 231         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 232         </span><span class="jsdoc-comment">// var touch = event.targetTouches[0];
 233         // _this._strokeMoveUpdate(touch);
 234         </span><span class="jsdoc-var">this.strokeMoveUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 235     },
 236
 237     </span><span class="jsdoc-var">_handleTouchEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 238         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wasCanvasTouched </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.target </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
 239         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wasCanvasTouched</span><span class="jsdoc-syntax">) {
 240             </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 241             </span><span class="jsdoc-comment">// var touch = event.changedTouches[0];
 242             // _this._strokeEnd(touch);
 243             </span><span class="jsdoc-var">this.strokeEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 244         }
 245     },
 246
 247     </span><span class="jsdoc-var">reset</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 248         </span><span class="jsdoc-var">this._lastPoints </span><span class="jsdoc-syntax">= [];
 249         </span><span class="jsdoc-var">this._lastVelocity </span><span class="jsdoc-syntax">= 0;
 250         </span><span class="jsdoc-var">this._lastWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.min_width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.max_width</span><span class="jsdoc-syntax">) / 2;
 251         </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dot_color</span><span class="jsdoc-syntax">;
 252     },
 253
 254     </span><span class="jsdoc-var">strokeMoveUpdate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 255     {
 256         </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 257
 258         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.throttle</span><span class="jsdoc-syntax">) {
 259             </span><span class="jsdoc-var">this.throttleStroke</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.throttle</span><span class="jsdoc-syntax">);
 260         }
 261         </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 262             </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 263         }
 264     },
 265
 266     </span><span class="jsdoc-var">strokeBegin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 267     {
 268         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newPointGroup </span><span class="jsdoc-syntax">= {
 269             </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.dot_color</span><span class="jsdoc-syntax">,
 270             </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: []
 271         };
 272
 273         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.onBegin </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) {
 274             </span><span class="jsdoc-var">this.onBegin</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 275         }
 276
 277         </span><span class="jsdoc-var">this.curve_data.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newPointGroup</span><span class="jsdoc-syntax">);
 278         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
 279         </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 280     },
 281
 282     </span><span class="jsdoc-var">strokeUpdate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 283     {
 284         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rect </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.getBoundingClientRect</span><span class="jsdoc-syntax">();
 285         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">point </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">this.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.xy</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">rect.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e.xy</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">rect.top</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">());
 286         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastPointGroup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.curve_data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.curve_data.length </span><span class="jsdoc-syntax">- 1];
 287         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPointGroup.points</span><span class="jsdoc-syntax">;
 288         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPoints.length </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; </span><span class="jsdoc-var">lastPoints</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lastPoints.length </span><span class="jsdoc-syntax">- 1];
 289         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isLastPointTooClose </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPoint
 290             </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">point.distanceTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lastPoint</span><span class="jsdoc-syntax">) &lt;= </span><span class="jsdoc-var">this.min_distance
 291             </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 292         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lastPointGroup.color</span><span class="jsdoc-syntax">;
 293         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">lastPoint </span><span class="jsdoc-syntax">|| !(</span><span class="jsdoc-var">lastPoint </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">isLastPointTooClose</span><span class="jsdoc-syntax">)) {
 294             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">curve </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addPoint</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">);
 295             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">lastPoint</span><span class="jsdoc-syntax">) {
 296                 </span><span class="jsdoc-var">this.drawDot</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">});
 297             }
 298             </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">) {
 299                 </span><span class="jsdoc-var">this.drawCurve</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">});
 300             }
 301             </span><span class="jsdoc-var">lastPoints.push</span><span class="jsdoc-syntax">({
 302                 </span><span class="jsdoc-var">time</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.time</span><span class="jsdoc-syntax">,
 303                 </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.x</span><span class="jsdoc-syntax">,
 304                 </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">point.y
 305             </span><span class="jsdoc-syntax">});
 306         }
 307     },
 308
 309     </span><span class="jsdoc-var">strokeEnd</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 310     {
 311         </span><span class="jsdoc-var">this.strokeUpdate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 312         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.onEnd </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'function'</span><span class="jsdoc-syntax">) {
 313             </span><span class="jsdoc-var">this.onEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 314         }
 315     },
 316
 317     </span><span class="jsdoc-var">addPoint</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">) {
 318         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_lastPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._lastPoints</span><span class="jsdoc-syntax">;
 319         </span><span class="jsdoc-var">_lastPoints.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point</span><span class="jsdoc-syntax">);
 320         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints.length </span><span class="jsdoc-syntax">&gt; 2) {
 321             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints.length </span><span class="jsdoc-syntax">=== 3) {
 322                 </span><span class="jsdoc-var">_lastPoints.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[0]);
 323             }
 324             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widths </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calculateCurveWidths</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">[2]);
 325             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">curve </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.Bezier.fromPoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_lastPoints</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 326             </span><span class="jsdoc-var">_lastPoints.shift</span><span class="jsdoc-syntax">();
 327             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">curve</span><span class="jsdoc-syntax">;
 328         }
 329         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 330     },
 331
 332     </span><span class="jsdoc-var">calculateCurveWidths</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">) {
 333         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">velocity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.velocity_filter_weight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">endPoint.velocityFrom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">) +
 334             (1 - </span><span class="jsdoc-var">this.velocity_filter_weight</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this._lastVelocity</span><span class="jsdoc-syntax">;
 335
 336         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.max_width </span><span class="jsdoc-syntax">/ (</span><span class="jsdoc-var">velocity </span><span class="jsdoc-syntax">+ 1), </span><span class="jsdoc-var">this.min_width</span><span class="jsdoc-syntax">);
 337         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widths </span><span class="jsdoc-syntax">= {
 338             </span><span class="jsdoc-var">end</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">newWidth</span><span class="jsdoc-syntax">,
 339             </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this._lastWidth
 340         </span><span class="jsdoc-syntax">};
 341
 342         </span><span class="jsdoc-var">this._lastVelocity </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">velocity</span><span class="jsdoc-syntax">;
 343         </span><span class="jsdoc-var">this._lastWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newWidth</span><span class="jsdoc-syntax">;
 344         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">;
 345     },
 346
 347     </span><span class="jsdoc-var">drawDot</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_a</span><span class="jsdoc-syntax">) {
 348         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">point </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.point</span><span class="jsdoc-syntax">;
 349         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
 350         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.dot_size </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'function' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.dot_size</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">this.dot_size</span><span class="jsdoc-syntax">;
 351         </span><span class="jsdoc-var">ctx.beginPath</span><span class="jsdoc-syntax">();
 352         </span><span class="jsdoc-var">this.drawCurveSegment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">point.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">point.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
 353         </span><span class="jsdoc-var">ctx.closePath</span><span class="jsdoc-syntax">();
 354         </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
 355         </span><span class="jsdoc-var">ctx.fill</span><span class="jsdoc-syntax">();
 356     },
 357
 358     </span><span class="jsdoc-var">drawCurve</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_a</span><span class="jsdoc-syntax">) {
 359         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">curve </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_a.curve</span><span class="jsdoc-syntax">;
 360         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
 361         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">widthDelta </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">curve.endWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">curve.startWidth</span><span class="jsdoc-syntax">;
 362         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">drawSteps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">curve.length</span><span class="jsdoc-syntax">()) * 2;
 363         </span><span class="jsdoc-var">ctx.beginPath</span><span class="jsdoc-syntax">();
 364         </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
 365         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">drawSteps</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
 366         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">drawSteps</span><span class="jsdoc-syntax">;
 367         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
 368         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
 369         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">= 1 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
 370         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">u</span><span class="jsdoc-syntax">;
 371         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">uuu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">u</span><span class="jsdoc-syntax">;
 372         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">uuu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.startPoint.x</span><span class="jsdoc-syntax">;
 373         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control1.x</span><span class="jsdoc-syntax">;
 374         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control2.x</span><span class="jsdoc-syntax">;
 375         </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.endPoint.x</span><span class="jsdoc-syntax">;
 376         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">uuu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.startPoint.y</span><span class="jsdoc-syntax">;
 377         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">uu </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control1.y</span><span class="jsdoc-syntax">;
 378         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= 3 * </span><span class="jsdoc-var">u </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">tt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.control2.y</span><span class="jsdoc-syntax">;
 379         </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">curve.endPoint.y</span><span class="jsdoc-syntax">;
 380         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">curve.startWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ttt </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">widthDelta</span><span class="jsdoc-syntax">;
 381         </span><span class="jsdoc-var">this.drawCurveSegment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
 382         }
 383         </span><span class="jsdoc-var">ctx.closePath</span><span class="jsdoc-syntax">();
 384         </span><span class="jsdoc-var">ctx.fill</span><span class="jsdoc-syntax">();
 385     },
 386
 387     </span><span class="jsdoc-var">drawCurveSegment</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">) {
 388         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
 389         </span><span class="jsdoc-var">ctx.moveTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
 390         </span><span class="jsdoc-var">ctx.arc</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">, 0, 2 * </span><span class="jsdoc-var">Math.PI</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 391         </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 392     },
 393
 394     </span><span class="jsdoc-var">clear</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 395     {
 396         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">();
 397         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">canvas </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
 398         </span><span class="jsdoc-var">ctx.fillStyle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bg_color</span><span class="jsdoc-syntax">;
 399         </span><span class="jsdoc-var">ctx.clearRect</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">canvas.height</span><span class="jsdoc-syntax">);
 400         </span><span class="jsdoc-var">ctx.fillRect</span><span class="jsdoc-syntax">(0, 0, </span><span class="jsdoc-var">canvas.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">canvas.height</span><span class="jsdoc-syntax">);
 401         </span><span class="jsdoc-var">this.curve_data </span><span class="jsdoc-syntax">= [];
 402         </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
 403         </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 404     },
 405
 406     </span><span class="jsdoc-var">fileEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 407     {
 408         </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 409     },
 410
 411     </span><span class="jsdoc-var">canvasEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 412     {
 413         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 414     },
 415
 416     </span><span class="jsdoc-var">canvasElCtx</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 417     {
 418         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'canvas'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.getContext</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'2d'</span><span class="jsdoc-syntax">);
 419     },
 420
 421     </span><span class="jsdoc-var">getImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">)
 422     {
 423         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.is_empty</span><span class="jsdoc-syntax">) {
 424             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 425         }
 426
 427         </span><span class="jsdoc-comment">// encryption ?
 428         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.canvasEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.toDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'image/'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">, 1);
 429     },
 430
 431     </span><span class="jsdoc-var">drawFromImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img_src</span><span class="jsdoc-syntax">)
 432     {
 433         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Image</span><span class="jsdoc-syntax">();
 434
 435         </span><span class="jsdoc-var">img.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 436             </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">, 0, 0);
 437         }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 438
 439         </span><span class="jsdoc-var">img.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">img_src</span><span class="jsdoc-syntax">;
 440
 441         </span><span class="jsdoc-var">this.is_empty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 442     },
 443
 444     </span><span class="jsdoc-var">selectImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 445     {
 446         </span><span class="jsdoc-var">this.fileEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.click</span><span class="jsdoc-syntax">();
 447     },
 448
 449     </span><span class="jsdoc-var">uploadImage</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 450     {
 451         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">FileReader</span><span class="jsdoc-syntax">();
 452
 453         </span><span class="jsdoc-var">reader.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 454             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Image</span><span class="jsdoc-syntax">();
 455             </span><span class="jsdoc-var">img.onload </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 456                 </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">();
 457                 </span><span class="jsdoc-var">this.canvasElCtx</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.drawImage</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">, 0, 0);
 458             }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 459             </span><span class="jsdoc-var">img.src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.target.result</span><span class="jsdoc-syntax">;
 460         }</span><span class="jsdoc-var">.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 461
 462         </span><span class="jsdoc-var">reader.readAsDataURL</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.target.files</span><span class="jsdoc-syntax">[0]);
 463     },
 464
 465     </span><span class="jsdoc-comment">// Bezier Point Constructor
 466     </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 467         </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">time</span><span class="jsdoc-syntax">) {
 468             </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
 469             </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
 470             </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">time </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
 471         }
 472         </span><span class="jsdoc-var">Point.prototype.distanceTo </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">) {
 473             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">start.x</span><span class="jsdoc-syntax">, 2) + </span><span class="jsdoc-var">Math.pow</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">start.y</span><span class="jsdoc-syntax">, 2));
 474         };
 475         </span><span class="jsdoc-var">Point.prototype.equals </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">other</span><span class="jsdoc-syntax">) {
 476             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.x </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.y </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">other.time</span><span class="jsdoc-syntax">;
 477         };
 478         </span><span class="jsdoc-var">Point.prototype.velocityFrom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">) {
 479             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">start.time
 480             </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.distanceTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">) / (</span><span class="jsdoc-var">this.time </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">start.time</span><span class="jsdoc-syntax">)
 481             : 0;
 482         };
 483         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Point</span><span class="jsdoc-syntax">;
 484     }()),
 485
 486
 487     </span><span class="jsdoc-comment">// Bezier Constructor
 488     </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 489         </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">control2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">control1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">startWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">endWidth</span><span class="jsdoc-syntax">) {
 490             </span><span class="jsdoc-var">this.startPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">startPoint</span><span class="jsdoc-syntax">;
 491             </span><span class="jsdoc-var">this.control2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">control2</span><span class="jsdoc-syntax">;
 492             </span><span class="jsdoc-var">this.control1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">control1</span><span class="jsdoc-syntax">;
 493             </span><span class="jsdoc-var">this.endPoint </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">endPoint</span><span class="jsdoc-syntax">;
 494             </span><span class="jsdoc-var">this.startWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">startWidth</span><span class="jsdoc-syntax">;
 495             </span><span class="jsdoc-var">this.endWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">endWidth</span><span class="jsdoc-syntax">;
 496         }
 497         </span><span class="jsdoc-var">Bezier.fromPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">widths</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">) {
 498             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calculateControlPoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[2], </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.c2</span><span class="jsdoc-syntax">;
 499             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c3 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.calculateControlPoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[2], </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[3], </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.c1</span><span class="jsdoc-syntax">;
 500             </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c3</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">[2], </span><span class="jsdoc-var">widths.start</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">widths.end</span><span class="jsdoc-syntax">);
 501         };
 502         </span><span class="jsdoc-var">Bezier.calculateControlPoints </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s3</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">) {
 503             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dx1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s1.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s2.x</span><span class="jsdoc-syntax">;
 504             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dy1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s1.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s2.y</span><span class="jsdoc-syntax">;
 505             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dx2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s3.x</span><span class="jsdoc-syntax">;
 506             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dy2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">s3.y</span><span class="jsdoc-syntax">;
 507             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m1 </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s1.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s2.x</span><span class="jsdoc-syntax">) / 2.0, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s1.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s2.y</span><span class="jsdoc-syntax">) / 2.0 };
 508             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m2 </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s2.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s3.x</span><span class="jsdoc-syntax">) / 2.0, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">s2.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s3.y</span><span class="jsdoc-syntax">) / 2.0 };
 509             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l1 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dx1 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dx1 </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dy1 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dy1</span><span class="jsdoc-syntax">);
 510             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l2 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dx2 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dx2 </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dy2 </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">dy2</span><span class="jsdoc-syntax">);
 511             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dxm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m1.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">m2.x</span><span class="jsdoc-syntax">;
 512             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dym </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m1.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">m2.y</span><span class="jsdoc-syntax">;
 513             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">l2 </span><span class="jsdoc-syntax">/ (</span><span class="jsdoc-var">l1 </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">l2</span><span class="jsdoc-syntax">);
 514             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cm </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">m2.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dxm </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">m2.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dym </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">};
 515             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">cm.x</span><span class="jsdoc-syntax">;
 516             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s2.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">cm.y</span><span class="jsdoc-syntax">;
 517             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 518                 </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">scope.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m1.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">tx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m1.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">),
 519                 </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">scope.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m2.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">tx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m2.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">)
 520             };
 521         };
 522         </span><span class="jsdoc-var">Bezier.prototype.length </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 523             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">steps </span><span class="jsdoc-syntax">= 10;
 524             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">= 0;
 525             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">px</span><span class="jsdoc-syntax">;
 526             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">py</span><span class="jsdoc-syntax">;
 527             </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">steps</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+= 1) {
 528                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">steps</span><span class="jsdoc-syntax">;
 529                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startPoint.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control1.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control2.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.endPoint.x</span><span class="jsdoc-syntax">);
 530                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.startPoint.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control1.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.control2.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.endPoint.y</span><span class="jsdoc-syntax">);
 531                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt; 0) {
 532                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xdiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cx </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">px</span><span class="jsdoc-syntax">;
 533                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ydiff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cy </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">py</span><span class="jsdoc-syntax">;
 534                     </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">Math.sqrt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xdiff </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">xdiff </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ydiff </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">ydiff</span><span class="jsdoc-syntax">);
 535                 }
 536                 </span><span class="jsdoc-var">px </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cx</span><span class="jsdoc-syntax">;
 537                 </span><span class="jsdoc-var">py </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cy</span><span class="jsdoc-syntax">;
 538             }
 539             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">;
 540         };
 541         </span><span class="jsdoc-var">Bezier.prototype.point </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c2</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">end</span><span class="jsdoc-syntax">) {
 542             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start </span><span class="jsdoc-syntax">* (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">))
 543             + (3.0 * </span><span class="jsdoc-var">c1 </span><span class="jsdoc-syntax">* (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
 544             + (3.0 * </span><span class="jsdoc-var">c2 </span><span class="jsdoc-syntax">* (1.0 - </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">)
 545             + (</span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
 546         };
 547         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Bezier</span><span class="jsdoc-syntax">;
 548     }()),
 549
 550     </span><span class="jsdoc-var">throttleStroke</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">wait</span><span class="jsdoc-syntax">) {
 551       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wait </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">void </span><span class="jsdoc-syntax">0) { </span><span class="jsdoc-var">wait </span><span class="jsdoc-syntax">= 250; }
 552       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= 0;
 553       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 554       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
 555       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">;
 556       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">;
 557       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">later </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 558           </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
 559           </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 560           </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">);
 561           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
 562               </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 563               </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= [];
 564           }
 565       };
 566       </span><span class="jsdoc-keyword">return function </span><span class="jsdoc-var">wrapper</span><span class="jsdoc-syntax">() {
 567           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= [];
 568           </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">_i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">arguments.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">++) {
 569               </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">_i</span><span class="jsdoc-syntax">];
 570           }
 571           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">now </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Date.now</span><span class="jsdoc-syntax">();
 572           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wait </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">now </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">previous</span><span class="jsdoc-syntax">);
 573           </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 574           </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">;
 575           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">&lt;= 0 || </span><span class="jsdoc-var">remaining </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">wait</span><span class="jsdoc-syntax">) {
 576               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
 577                   </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">);
 578                   </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 579               }
 580               </span><span class="jsdoc-var">previous </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">now</span><span class="jsdoc-syntax">;
 581               </span><span class="jsdoc-var">result </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fn.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">storedContext</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">storedArgs</span><span class="jsdoc-syntax">);
 582               </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
 583                   </span><span class="jsdoc-var">storedContext </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 584                   </span><span class="jsdoc-var">storedArgs </span><span class="jsdoc-syntax">= [];
 585               }
 586           }
 587           </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">timeout</span><span class="jsdoc-syntax">) {
 588               </span><span class="jsdoc-var">timeout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">later</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">remaining</span><span class="jsdoc-syntax">);
 589           }
 590           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">result</span><span class="jsdoc-syntax">;
 591       };
 592   }
 593
 594 });
 595
 596
 597
 598  </span></code></body></html>