docs/fabric.SprayBrush.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: SprayBrush</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
    <link type="text/css" rel="stylesheet" href="styles/carbonads.css">
    <link type="text/css" rel="stylesheet" href="../css/master.css">
</head>

<body>
    <ul id="header">
      <li><a href="http://fabricjs.com/">Home</a></li>
      <li><a href="http://fabricjs.com/demos">Demos</a></li>
      <li><a href="http://fabricjs.com/articles">Tutorial</a></li>
      <li><a href="http://fabricjs.com/docs">Docs</a></li>
      <li><a href="http://fabricjs.com/build">Custom Build</a></li>
      <li><a href="http://fabricjs.com/help">Support</a></li>
      <li><a href="http://fabricjs.com/test">Tests/Benchmarks</a></li>
      <li><a href="http://fabricjs.com/team">Team</a></li>

      <li class="secondary">
        <a href="http://travis-ci.org/#!/kangax/fabric.js">
          <img src="https://api.travis-ci.org/kangax/fabric.js.png?branch=master">
        </a>
      </li>
      <li class="gittip secondary">
        <iframe style="border: 0; margin: 0; padding: 0;"
          src="https://www.gittip.com/kangax/widget.html" width="48pt" height="22pt"></iframe>
      </li>
      <li class="flattr secondary">
        <a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://kangax.github.com/fabric.js"></a>
        <noscript>
          <a href="http://flattr.com/thing/391332/Fabric-js" target="_blank">
            <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" />
          </a>
        </noscript>
      </li>
      <li class="github secondary">
        <iframe src="http://ghbtns.com/github-btn.html?user=kangax&repo=fabric.js&type=watch&count=true"
          allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
      </li>
      <li class="twitter secondary">
        <a href="https://twitter.com/fabricjs" class="twitter-follow-button" data-show-count="true">Follow @fabricjs</a>
      </li>
    </ul>

    <script>
    (function() {
      if (document.location.hostname === 'localhost') {
        var links = document.getElementById('header').getElementsByTagName('a');
        for (var i = 0, len = links.length; i < len; i++) {
          // very retarted fix but fuck it
          links[i].href = links[i].href.replace('fabricjs.com', 'localhost:4000');
        }
      }
      else {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
        t.parentNode.insertBefore(s, t);
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
      }
    })();
    </script>
    <nav>
        <div class="upperNav" >
        <script>
          (function() {
            var cx = '001658083293066718026:dbxamnxeuku';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
              '//www.google.com/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
          })();
        </script>
        <gcse:search></gcse:search>
        </div>
        <div class="lowerNav" >
            <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="fabric.ActiveSelection.html">ActiveSelection</a></li><li><a href="fabric.BaseBrush.html">BaseBrush</a></li><li><a href="fabric.Canvas.html">Canvas</a></li><li><a href="fabric.Circle.html">Circle</a></li><li><a href="fabric.CircleBrush.html">CircleBrush</a></li><li><a href="fabric.Color.html">Color</a></li><li><a href="fabric.Ellipse.html">Ellipse</a></li><li><a href="fabric.Gradient.html">Gradient</a></li><li><a href="fabric.Group.html">Group</a></li><li><a href="fabric.Image.html">Image</a></li><li><a href="fabric.Image.filters.BaseFilter.html">BaseFilter</a></li><li><a href="fabric.Image.filters.Blur.html">Blur</a></li><li><a href="fabric.Image.filters.Brightness.html">Brightness</a></li><li><a href="fabric.Image.filters.ColorMatrix.html">ColorMatrix</a></li><li><a href="fabric.Image.filters.Contrast.html">Contrast</a></li><li><a href="fabric.Image.filters.Convolute.html">Convolute</a></li><li><a href="fabric.Image.filters.fabric.Image.filter.BlendColor.html">BlendColor</a></li><li><a href="fabric.Image.filters.fabric.Image.filter.BlendImage.html">BlendImage</a></li><li><a href="fabric.Image.filters.Gamma.html">Gamma</a></li><li><a href="fabric.Image.filters.Grayscale.html">Grayscale</a></li><li><a href="fabric.Image.filters.HueRotation.html">HueRotation</a></li><li><a href="fabric.Image.filters.Invert.html">Invert</a></li><li><a href="fabric.Image.filters.Noise.html">Noise</a></li><li><a href="fabric.Image.filters.Pixelate.html">Pixelate</a></li><li><a href="fabric.Image.filters.RemoveColor.html">RemoveColor</a></li><li><a href="fabric.Image.filters.Resize.html">Resize</a></li><li><a href="fabric.Image.filters.Saturation.html">Saturation</a></li><li><a href="fabric.Intersection.html">Intersection</a></li><li><a href="fabric.IText.html">IText</a></li><li><a href="fabric.Line.html">Line</a></li><li><a href="fabric.Object.html">Object</a></li><li><a href="fabric.Path.html">Path</a></li><li><a href="fabric.Pattern.html">Pattern</a></li><li><a href="fabric.PatternBrush.html">PatternBrush</a></li><li><a href="fabric.PencilBrush.html">PencilBrush</a></li><li><a href="fabric.Point.html">Point</a></li><li><a href="fabric.Polygon.html">Polygon</a></li><li><a href="fabric.Polyline.html">Polyline</a></li><li><a href="fabric.Rect.html">Rect</a></li><li><a href="fabric.Shadow.html">Shadow</a></li><li><a href="fabric.SprayBrush.html">SprayBrush</a></li><li><a href="fabric.StaticCanvas.html">StaticCanvas</a></li><li><a href="fabric.Text.html">Text</a></li><li><a href="fabric.Textbox.html">Textbox</a></li><li><a href="fabric.Triangle.html">Triangle</a></li></ul><h3>Namespaces</h3><ul><li><a href="fabric.html">fabric</a></li><li><a href="fabric.Collection.html">Collection</a></li><li><a href="fabric.CommonMethods.html">CommonMethods</a></li><li><a href="fabric.Image.filters.html">filters</a></li><li><a href="fabric.Observable.html">Observable</a></li><li><a href="fabric.util.html">util</a></li><li><a href="fabric.util.array.html">array</a></li><li><a href="fabric.util.ease.html">ease</a></li><li><a href="fabric.util.object.html">object</a></li><li><a href="fabric.util.string.html">string</a></li></ul><h3>Global</h3><ul><li><a href="global.html#__cachedLines">__cachedLines</a></li><li><a href="global.html#_splitTextIntoLines">_splitTextIntoLines</a></li><li><a href="global.html#_wrapLine">_wrapLine</a></li><li><a href="global.html#_wrapText">_wrapText</a></li><li><a href="global.html#applyFilters">applyFilters</a></li><li><a href="global.html#copyGLTo2DDrawImage">copyGLTo2DDrawImage</a></li><li><a href="global.html#copyGLTo2DPutImageData">copyGLTo2DPutImageData</a></li><li><a href="global.html#dynamicMinWidth">dynamicMinWidth</a></li><li><a href="global.html#initialize">initialize</a></li><li><a href="global.html#isEndOfWrapping">isEndOfWrapping</a></li><li><a href="global.html#lockScalingFlip">lockScalingFlip</a></li><li><a href="global.html#minWidth">minWidth</a></li><li><a href="global.html#noScaleCache">noScaleCache</a></li><li><a href="global.html#styleHas">styleHas</a></li><li><a href="global.html#toObject">toObject</a></li><li><a href="global.html#type">type</a></li></ul>
        </div>
    </nav>
<div id="main">
    <h1 class="page-title">Class: SprayBrush</h1>
    

<section>

<header>
    
        <h2>
            <span class="ancestors"><a href="fabric.html">fabric</a>.</span>SprayBrush</h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h4 class="name" id="SprayBrush"><a href="#SprayBrush" ><span class="type-signature"></span>new SprayBrush<span class="signature">()</span><span class="type-signature"></span></a></h4>
    

<div class="description">
    SprayBrush class
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8530">line 8530</a>
    </li></ul></dd>
    

</dl>


    </div>

    
        <h3 class="subsection-title">Members</h3>

        
<h4 class="name" id="density"><a href="#density" ><span class="type-signature"></span>density<span class="type-signature"> :Number</span></a></h4>


<div class="description">
    Density of a spray (number of dots per chunk)
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>20</li>
        </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8548">line 8548</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="dotWidth"><a href="#dotWidth" ><span class="type-signature"></span>dotWidth<span class="type-signature"> :Number</span></a></h4>


<div class="description">
    Width of spray dots
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>1</li>
        </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8555">line 8555</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="dotWidthVariance"><a href="#dotWidthVariance" ><span class="type-signature"></span>dotWidthVariance<span class="type-signature"> :Number</span></a></h4>


<div class="description">
    Width variance of spray dots
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>1</li>
        </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8562">line 8562</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="optimizeOverlapping"><a href="#optimizeOverlapping" ><span class="type-signature"></span>optimizeOverlapping<span class="type-signature"> :Boolean</span></a></h4>


<div class="description">
    Whether overlapping dots (rectangles) should be removed (for performance reasons)
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Boolean</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>true</li>
        </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8576">line 8576</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="randomOpacity"><a href="#randomOpacity" ><span class="type-signature"></span>randomOpacity<span class="type-signature"> :Boolean</span></a></h4>


<div class="description">
    Whether opacity of a dot should be random
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Boolean</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8569">line 8569</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="width"><a href="#width" ><span class="type-signature"></span>width<span class="type-signature"> :Number</span></a></h4>


<div class="description">
    Width of a spray
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Number</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy">
            <li>10</li>
        </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8541">line 8541</a>
    </li></ul></dd>
    

</dl>


        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="addSprayChunk"><a href="#addSprayChunk" ><span class="type-signature"></span>addSprayChunk<span class="signature">(pointer)</span><span class="type-signature"></span></a></h4>
    

    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>pointer</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8702">line 8702</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="initialize"><a href="#initialize" ><span class="type-signature"></span>initialize<span class="signature">(canvas)</span><span class="type-signature"> &rarr; {<a href="fabric.SprayBrush.html">fabric.SprayBrush</a>}</span></a></h4>
    

<div class="description">
    Constructor
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="fabric.Canvas.html">fabric.Canvas</a></span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8583">line 8583</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    Instance of a spray brush
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type"><a href="fabric.SprayBrush.html">fabric.SprayBrush</a></span>


    </dd>
</dl>

    
    <h4 class="name" id="onMouseDown"><a href="#onMouseDown" ><span class="type-signature"></span>onMouseDown<span class="signature">(pointer)</span><span class="type-signature"></span></a></h4>
    

<div class="description">
    Invoked on mouse down
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>pointer</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8592">line 8592</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="onMouseMove"><a href="#onMouseMove" ><span class="type-signature"></span>onMouseMove<span class="signature">(pointer)</span><span class="type-signature"></span></a></h4>
    

<div class="description">
    Invoked on mouse move
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>pointer</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8605">line 8605</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="onMouseUp"><a href="#onMouseUp" ><span class="type-signature"></span>onMouseUp<span class="signature">()</span><span class="type-signature"></span></a></h4>
    

<div class="description">
    Invoked on mouse up
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8613">line 8613</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="render"><a href="#render" ><span class="type-signature"></span>render<span class="signature">()</span><span class="type-signature"></span></a></h4>
    

<div class="description">
    Renders brush
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="fabric.js.html">fabric.js</a>, <a href="fabric.js.html#line8681">line 8681</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>
<div id="carbonads-container">
  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fabricjscom" id="_carbonads_js"></script>
</div>
<footer><input id="toggle" type="checkbox" onclick="toggle(this.checked);"  /><label for="toggle" >Hide inherited properties and method from the page</label><br />Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sat Nov 25 2017 18:20:05 GMT+0100 (CET)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
<script>
function toggle(displayState) {
    var value =  displayState ? 'none' : 'block';
    var elements = document.getElementsByClassName('inherited');
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = value;
    }
}
</script>
</body>
</html>