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';
}
参考
http://stackoverflow.com/questions/3397334/use-canvas-as-a-css-background