Pattern Lock HTML CSS JS — Android Gesture PIN

A pattern lock is the 3x3 grid of dots you connect with a single gesture to unlock an Android phone. This recreation draws the nine dots and the connecting path on an HTML5 Canvas, tracks the drag with the Pointer Events API, validates the traced sequence against a stored pattern, and adds real-world touches like an attempt counter, a lockout after too many failures, shake feedback and a two-step change-PIN flow. It is pure JavaScript and canvas — no libraries. Here is how it works.

Laying out and drawing the dots

The nine dots are positioned on a regular grid. Their center coordinates are computed from the canvas size, an outer padding and the spacing between columns and rows, then stored in an array of {x, y, index} objects. Each render pass clears the canvas and redraws every dot as a filled circle with ctx.arc, drawing a larger faint outer ring and a smaller solid inner core so selected dots can be highlighted by enlarging or recoloring the core. Keeping dot positions in an array makes both drawing and hit testing trivial.

Mapping pointer position to canvas space

All interaction uses Pointer Events so mouse, touch and stylus share one code path. On pointerdown the gesture begins; on pointermove the current path is extended; on pointerup the pattern is evaluated. Because the canvas can be displayed at a different size than its bitmap, every pointer event is converted to canvas-relative coordinates using getBoundingClientRect: subtract the rect's left/top from clientX/clientY and scale by the ratio of canvas pixel size to displayed size. This guarantees the gesture lines up with the dots on any screen.

Hit testing dots during the drag

As the pointer moves, the code checks whether it is near an unvisited dot. For each dot it measures the Euclidean distance from the pointer to the dot center, Math.hypot(px - dot.x, py - dot.y), and if that distance is within a generous threshold — roughly the dot radius plus a snap radius — and the dot is not already in the path, the dot's index is pushed onto the path array and the dot is marked selected. The snap radius makes the lock forgiving, so users do not have to hit dots precisely. Each newly captured dot is the next vertex of the unlock pattern.

Drawing the connecting path

On every move the canvas is redrawn: the dots first, then a polyline connecting the centers of all dots currently in path in order, then a final segment from the last captured dot to the live pointer position so the line appears to follow the finger. The stroke uses a rounded lineCap and lineJoin and a glowing color. This live trailing segment is what makes the gesture feel responsive and continuous.

Validating the pattern

When the pointer is released, the traced path array of dot indices is compared against the stored correct pattern. Validation is a simple element-by-element array comparison after a length check — the sequences must match exactly, since order is part of the secret. On success the path turns green and an unlocked state is shown. On failure the path turns red, a CSS shake animation is applied to the card by toggling a class, the attempt counter increments, and after a short setTimeout the canvas resets to the neutral state ready for another try.

Lockout after repeated failures

To mimic real device security, an attempt counter tracks consecutive failures. Once it reaches a limit, the lock enters a temporary lockout: input is disabled, a countdown message is shown, and a setTimeout re-enables input after a delay while resetting the counter. This demonstrates a basic brute-force mitigation pattern entirely on the client.

The change-PIN flow

Setting a new pattern is a deliberate two-step confirmation, exactly like a phone. The user first draws a candidate pattern, which is held in a temporary variable; the UI then prompts them to draw it again to confirm. If the second trace matches the first, the new pattern becomes the stored secret and the UI returns to the locked state; if they differ, an error is shown and the flow restarts. Requiring two matching traces prevents the user from locking themselves out with a mis-drawn pattern. A small state variable ('verify', 'set-first', 'set-confirm') drives which mode the release handler is in.

Why these techniques matter

The component is a compact demonstration of canvas hit testing with distance math, Pointer Events with proper coordinate mapping, building an ordered selection during a drag, array-equality validation, and timed UI states for feedback and lockout. The same patterns underpin signature pads, gesture games and any drag-to-connect interface. Everything is self-contained, themeable through a few constants, and works identically across mouse and touch.