Android-like Pattern Lock In Vanilla JavaScript – PatternLockJS

Category: Javascript , Others | April 20, 2017
Views Total:5,712 views
Official Page:Go to website
Last Update:April 20, 2017


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


Execute a callback function when the pattern is complete:

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


You Might Be Interested In:

Leave a Reply