stream_canvas_test.js

var rAS = require('request-animation-stream');

var canvas_el = document.getElementById('main-canvas');
var context = canvas_el.getContext('2d');

var render_stream = rAS(true, true);

var blue = 0;
var red = 0;

function render(data) {

    context.fillStyle = data
    context.fillRect (10, 10, 235, 480);

    blue += 5;
    if (blue > 255) {
        blue = 0;
    }
    context.fillStyle = "rgba(0, 0, " + blue + ", 1)";
    context.fillRect (255, 10, 235, 480);
}

function incrementColour() {
    red += 5;
    if (red > 255) {
        red = 0;
    }
    render_stream.write("rgba(" + red + ", 0, 0, 1)");
}

render_stream.on('data', render);
setInterval(incrementColour, 100);