Blog Single

Canvas Touch Key

Sample Link: Canvas Triangle Recorder

A novel interface and algorithm for recording user made paths through touch or mouse on an HTML5 canvas. The project was to create a prototype for recording user made paths over base images.

Canvas creates issues in that if a mouse drag or touch move event is too fast for the browser to record, the path recorded skips. The triangular mesh here makes connections between skip points based on calculated relation between skip points. The ultimate goal was to create an array key that would be checked as a passkey against a control. The project evolved well past this iteration but is protected under NDA.

In the sample link above, you can change many of the controls for the canvas. The mesh is the triangular mesh used to calculated touch/mouse points. The tri-path is the triangular path. The gradation of colors shows actual touch points and calculated (calculated are lighter in color. The Buffer is the radius around the touch point used to calculate the central triangle.