Canvas Colorizer

Experimenting with hex colors and math on a canvas.

by Preston Badeer

HTML

<canvas id="pancake" width="400" height="400">not compatible</canvas>

<div id="copy"></div>

<button id="pause">pause</button> <button id="play">play (reset)</button> <button id="speed">speed up</button>

<button id="plus">+</button>color variation<button id="minus">-</button>

CSS

#pancake {
    border: 1px solid black;
}

JavaScript

var c = document.getElementById('pancake');
var ctx = c.getContext('2d');
//16777215 limit
var inc = 1,
    x = 0,
    y = 0,
    vary = 10;

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

    return str;
}

function runme() {
    colo = pad(inc.toString(16), 6);

    ctx.fillStyle = "#" + colo;
    ctx.clearRect(x, y, 10, 10);
    ctx.fillRect(x, y, 10, 10);

    x = x + 10;
    if (x == 400) {
        y = y + 10;
        x = 0;
    }
    if (y >= 400) {
        c.width = c.width;
        x = 0;
        y = 0;
    }

    inc = inc + vary;

    $('#copy').text(colo);
}


var running = setInterval(runme, 100);

$('#plus').click(function() {
    vary = vary + 100;
});

$('#minus').click(function() {
    if (vary >= 110) {
        vary = vary - 100;
    }
});

$('#pause').click(function() {
    clearInterval(running);
});

$('#play').click(function() {
    clearInterval(running);
    running = setInterval(runme, 100);
});

$('#speed').click(function() {
    clearInterval(running);
    running = setInterval(runme, 1);
});