typing.js

var Canvas = require('canvas'),
    fs = require('fs');

var w = 1280, h = 720;
var c = new Canvas(w, h);
var ctx = c.getContext('2d');

var rows = ['0123456789'.split(''), 'qwertyuiop'.split(''), ' asdfghjkl '.split(''), ' zxcvbnm  '.split('')];

function pos(k) {
    if (!k.match(/\w+/)) return;
    var row = rows.filter(function(r) {
        return r.indexOf(k) !== -1;
    })[0];
    var y = 140 + (rows.indexOf(row) * 160);
    var x = 60 + (row.indexOf(k) * 120);
    return [x, y];
}

var alpha = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function(x) { return '' + x; });

for (var a = 'a'; a <= 'z'; a = String.fromCharCode(a.charCodeAt(0) + 1)) alpha.push(a);

ctx.font = '80px Helvetica';
function drawkeys() {
    alpha.map(function(a) {
        var p = pos(a);
        ctx.fillStyle = '#0066FF';
        ctx.fillText(a.toUpperCase(), p[0], p[1]);
        ctx.fillStyle = '#FF91AA';
        ctx.fillText(a.toUpperCase(), p[0] - 5, p[1]);
    });
    ctx.fillStyle = '#fff';
}

var allkeys = fs.readFileSync('allkeys.log', 'utf8').split('');

var j = 0, n = 0;

function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {
        str = '0' + str;
    }
    return str;
}

ctx.strokeStyle = '#1500B1';
ctx.fillStyle = '#fff';
ctx.lineWidth = 4;

for (i = 0; i < allkeys.length - 1; i++) {
    var a = allkeys[i].toLowerCase();
    var b = allkeys[i + 1].toLowerCase();
    if (!a.match(/[a-z0-9]/)) continue;
    if (!b.match(/[a-z0-9]/)) continue;
    var ap = pos(a);
    var bp = pos(b);

    ctx.beginPath();
    ctx.moveTo(ap[0] + 20, ap[1] - 20);
    ctx.lineTo(bp[0] + 20, bp[1] - 20);
    ctx.stroke();
    j++;
    if (j > 100) {
        drawkeys();
        fs.writeFileSync('keysanim/k' + pad(n, 10) + '.png', c.toBuffer());
        n++;
        ctx.globalAlpha = 0.4;
        ctx.fillRect(0, 0, 1280, 720);
        ctx.globalAlpha = 1;
        j = 0;
    }
}