Vector gradient calculator

With hex2rgb converter.

by schrodingers

HTML

<h1>Vector calculator</h1>

<canvas id="vecgen"></canvas>

CSS

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: #ffe;
}
h1 {
    font: 1.5em/1.5'Roboto', sans-serif;
    padding: 1em;
}

JavaScript

// Vector calculators
var vec = {
    add: function (v1, v2) {
        var result = [];
        for (var i = 0; i < v1.length; i++) {
            result[i] = v1[i] + v2[i];
        }
        return result;
    },
    sub: function (v1, v2) {
        var result = [];
        for (var i = 0; i < v1.length; i++) {
            result[i] = v1[i] - v2[i];
        }
        return result;
    },
    magnitude: function (v) {
        // Return the magnitude of the vector
        var result = 0;
        for (var i = 0; i < v.length; i++) {
            result += Math.pow(v[i], 2);
        }
        return Math.sqrt(result);
    },
    unit: function (v) {
        // Return the unit vector
        var mag = vec.magnitude(v),
            result = [];
        for (var i = 0; i < v.length; i++) {
            result[i] = v[i] / mag;
        }
        return result;
    },
    neighbourhood: function (v1, v2, delta) {
        // Returns true iff all elements in v1 are in the neighbourhood of v1
        delta = (delta) ? delta : 1; // Maximum of 1 difference
        for (var i = 0; i < v2.length; i++) {
            if ((Math.floor(v2[i]) - delta) > Math.floor(v1[i]) || (Math.floor(v2[i]) + delta) < Math.floor(v1[i])) {
                return false;
            }
        }
        return true;
    }
};

function hex2rgb(h) {
    h = h.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });
    h = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
    return (h) ? [parseInt(h[1], 16), parseInt(h[2], 16), parseInt(h[3], 16)] : [0, 0, 0];
}

function vec2rgb(v) {
    return "rgba(" + Math.floor(v[0]) + "," + Math.floor(v[1]) + "," + Math.floor(v[2]) + ",255)";
}

function vectorGradient(canvas, from, to) {
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    from = hex2rgb(from);
    to = hex2rgb(to);

    var directionVector = vec.sub(to, from);
    var unitVector =...