Set you pattern. This will be used to validate all other 3*3 pattern in following examples.

Minimum initialization.

          var lock= new PatternLock('#patternHolder');
        

Draw line between two points only when we reach second point.

          var lock= new PatternLock('#patternHolder',{lineOnMove:false})
        

Keep pattern hidden while drawing.

          var lock= new PatternLock('#patternHolder',{patternVisible:false});
        

Allow repeating over dots

Note : Allowing repeation over dots gives a more complex pattern but have different side effects, like arrow css will not be correct, forming a multiple loop and confusing patterns.

            var lock= new PatternLock('#patternHolder',{allowRepeat : true});
        

Updating size and spacing between circles

          var lock= new PatternLock('#patternHolder',{radius:30,margin:20});
        

Create different matrix pattern

          var lock= new PatternLock('#patternHolder',{matrix:[4,4]});
        

Using mapper

          var lock=new PatternLock('#patternHolder',{
            mapper: function(idx){
              return (idx%9) + 1;
              }
          });
        

PatternLock with direction.

            var lock= new PatternLock('#patternHolder');
          

Using as a captcha(Require patternCaptha on node server)
Match the pattern in right side.