Wekbit で Canvas を背景に使う #JavaScript

Webkit では -webkit-canvas と document.getCSSCanvasContext を使って、canvas を背景に使うことができます。
グラフィックソフトを立ち上げる手間を省いたり、背景を動的に生成したりすることができますね。

以下、例はランダムな背景です。

body {
    background: #fff -webkit-canvas(random) 0 0 repeat;
}

var w = 100;
var h = 100;
console.log(1);
var ctx = document.getCSSCanvasContext('2d', 'random', w, h);
for (var j = 0; j < 3; j++) {
    ctx.beginPath();
    for (var i = 0; i < 3; i++) {
        if (i === 0) {
            ctx.moveTo(Math.random() * w, Math.random() * h);
        } else {
            ctx.lineTo(Math.random() * w, Math.random() * h);
        }
    }
    var hue = Math.random() * 255;
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 50%, 0.5)';
    ctx.fill();
    ctx.strokeStyle = '#000';
}

jsFiddle 上のデモ

参考
http://stackoverflow.com/questions/3397334/use-canvas-as-a-css-background