gradient as an ease between colors example

looks cool but its just an example for a blog post

by Darby Rathbone

CSS

canvas {
    width:100%;
    height:5em;
}

JavaScript

function pixel(arr) {
    var _pixel = Object.create(null);
    _pixel.r = arr[0];
    _pixel.g = arr[1];
    _pixel.b = arr[2];
    _pixel.a = arr[3];
    _pixel.toString = function () {
        return "RGBA(" + _pixel.r + "," + _pixel.g + "," + _pixel.b + "," + _pixel.a + ")";
    };
    return _pixel;
}

function colors(color1, color2, steps) {
    var canvas = document.createElement('canvas'),
        c = canvas.getContext('2d');
    canvas.width = parseInt(steps, 10);
    canvas.height = 1;
    var grd = c.createLinearGradient(0, 0, canvas.width, 0);
    grd.addColorStop(0, color1);
    grd.addColorStop(1, color2);
    c.fillStyle = grd;
    c.fillRect(0, 0, canvas.width, 1);
    var imgd = c.getImageData(0, 0, canvas.width, 1);
    var pix = [].slice.call(imgd.data);
    var pixels = [];
    while (pix.length) {
        pixels.push(new pixel(pix.splice(0, 4)));
    }
    console.log(pixels);
    return pixels;
}
colors("gold", "maroon", 40).forEach(function (e, i, a) {
    var s = document.createElement('span');
    s.style.border = "black 1px solid";
    s.style.display = "inline-block";;
    s.style.width = "1em";
    s.style.height = "1em";
    s.style.background = e;
    document.body.appendChild(s);
});