Android-like Pattern Lock In Vanilla JavaScript – PatternLockJS

A vanilla JavaScript plugin used for simulating the Android-like, HTML5 canvas based pattern lock interface to manage passwords on your web app.

How to use it:

Include the main JavaScript file on your html page.

<script src='PatternLock.js'></script>

Create a canvas element in which you want to draw the pattern lock interface.

<canvas id='patternLock'></canvas>

Initialize the PatternLockJS and done.

const patternLock= new PatternLockJS({
      el: '#patternLock'
});

Config the pattern lock interface using the following options.

const patternLock= new PatternLockJS({
      accent: '#1abc9c',
      primary: '#ffffff',
      bg: '#2c3e50',
      dimens: {
        line_width: 6,
        node_radius: 28,
        node_core: 8,
        node_ring: 1,
      }
});

Generate the grid of nodes.

// rows: The number of horizontal nodes
// cols: The number of vertical nodes
patternLock.generateGrid(rows, cols)

Attach event listeners and start frame loops

patternLock.start()

Execute a callback function when the pattern is complete:

patternLock.onPatternComplete= nodes => {
  // Check if the pattern is right
};