hatching test in canvas, see it in action: http://jsfiddle.net/S5aAY/

gistfile1.js

// <canvas>

var w = 600, h = 300;

var canvas = document.getElementsByTagName('CANVAS')[0];
canvas.width = w;
canvas.height = h;

var context = canvas.getContext('2d');

context.fillStyle = '#f0f0ff';
context.fillRect(0, 0, w, h);

context.strokeStyle = '#000000';

var xVariance = 200;
var yVariance = 30;
var lineVariance = 10;

//context.translate(w/2, -h/2);
//context.rotate(Math.PI / 4);

var x = Math.random()*xVariance<<0;
var y = Math.random()*yVariance <<0;
context.strokeStyle = 'rgba(0,0,0,'+(0.5 + Math.random()*0.5)+')';

while (y < h) {
    context.beginPath();
    context.moveTo(x, y);
    x = w - Math.random()*xVariance<<0;
    y += Math.random()*yVariance <<0;
    context.lineTo(x, y);

    context.lineWidth = Math.random()*lineVariance
    context.stroke();

    context.strokeStyle = 'rgba(0,0,0,'+(0.5 + Math.random()*0.5)+')';

    context.beginPath();
    context.moveTo(x, y);
    x = Math.random()*xVariance<<0;
    y += Math.random()*yVariance <<0;
    context.lineTo(x, y);

    context.lineWidth = Math.random()*lineVariance;
    context.stroke();

    context.strokeStyle = 'rgba(0,0,0,'+(0.5 + Math.random()*0.5)+')';
}