Pattern Lock Library For Web App – PatternLockJS

Category: Form , Javascript | June 19, 2022
Views Total:2,619 views
Official Page:Go to website
Last Update:June 19, 2022


Pattern Lock Library For Web App – PatternLockJS


Just another JavaScript library (es6) that lets you create a canvas based pattern lock screen to protect content on the web app.

Fully customizable and styleable. Currently comes with 3 built-in themes: default, success, and failure.

How to use it:

Install the PatternLockJS with NPM or Yarn.

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

Import the PatternLockJS.

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

Create a canvas element for the pattern lock.

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

Create a new pattern lock screen.

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

Customize the height/width of the pattern lock.

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:

  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 you draw the pattern.

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

Check if the hash code matches the password.

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


v0.1.2 (06/19/2022)

  • Fixed recalculateBounds

v0.1.1 (11/27/2021)

  • removes multiple unnecassary calls to getBoundingClientRect


  •   Toggle button text change


  • Fixed: Empty pattern (no nodes), returns ‘MA==’

You Might Be Interested In:

Leave a Reply