Pattern Lock Library For Web With Canvas | PatternLockJS

PatternLockJS is a JavaScript library that allows you to create a drawing board-based pattern lock screen to protect content on a web application.

how to create pattern lock in android, brute force android pattern lock github, pattern lock using javascript, ionic pattern lock, android pattern lock view

How to make use of it:

Install PatternLockJS with NPM or Yarn.

# Yarn
$ yarn add @phenax/pattern-lock-js

# NPM
$ npm install @phenax/pattern-lock-js --save

Import the PatternLockJS file.

import PatternLock from '@phenax/pattern-lock-js';

Create a canvas element to lock the pattern.

<canvas id="example"></canvas>

Create a new pattern lock screen.

const myLock = PatternLock({
      $canvas: document.querySelector('#example')
});

Customize the height/width of the lock pattern.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      width: 300, // default
      height: 430 // default
});

Set the number of grids.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      grid: [3, 3]
});

Set the theme.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      theme: 'default' // or success, and failure
});

Or create your own styles:

patternLock.setTheme({
  colors: {
    accent: '#1abc9c',     // Accent color for node
    primary: '#ffffff',    // Primary node and line color
    bg: '#2c3e50',         // Canvas background color
  },
  dimens: {
    node_radius: 20,       // Radius of the outer ring of a node
    line_width: 6,         // Thickness of the line joining nodes
    node_core: 8,          // Radius of the inner circle of a node
    node_ring: 1,          // Outer ring thickness
  }
});

Perform an action after drawing the pattern/model.

myLock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());

Check if the hash code matches the password.

lock.matchHash('MTA1MDA0MzEw')
.onSuccess(() => lock.setTheme('success'))
.onFailure(() => lock.setTheme('failure'));

Pattern Lock Library For Web App, PatternLockJS Plugin/Github

See Demo And Download

Official Website(phenax): Click Here

This superior jQuery/javascript plugin is developed by phenax. For extra advanced usage, please go to the official website.