Is there a good method for dynamically drawing clouds with HTML5 canvas and javascript without using images?

Question

I am trying to create a background for my website that uses canvases to draw stuff, get the data URL of it and set it as the background-image property of an element. The method works, but I can't find a good way to draw a cloud on the canvas. Other simpler things like the sun and stars are easy to do without images, and I would prefer to keep the entire script image-less. Drawing a multitude of circles around a point can slightly do it, but I would prefer a more realistic way to do it. Thanks in advance.

Answer 1

Ok, I have been thinking about the problem of draw clouds, and this is where I am at.

HTMLCanvasElement.prototype.makeCloud=function (xLast, yLast, rLast, lLast){
    rLast = (rLast || 50)
    lLast = lLast || Math.random()*25+75;
    var x = (xLast || 250) + Math.random()*(2*rLast)-rLast/1,
        y = (yLast || 250) + Math.random()*(1*rLast)-rLast/1.5,
        r = (rLast) + Math.random()*10-7.5,
        l = (lLast);

    if(x-r < 0)
        x = r+1;
    else if (x+r > this.width)
        x = this.width-r-1;
    if(y-r < 0)
        y = r+1;
    else if (y+r > this.height)
        y = this.height-r-1;
    if(r <= 0)
        return this;
    if(l<0)
        l=0;
    else if(l>100)
        l=100;

    var ctx=this.getContext('2d');
    ctx.fillStyle='hsl(0, 0%, '+l+'%)';
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    if(Math.random < 0.01)
        return this;
    this.makeCloud(x, y, r, l)
    return this;
} 

It generates some pretty crazy stuff... can anyone think of any improvements? i know editing the canvas prototype isn't the best thing to do, but my application uses a bit of chaining and this makes it flow better.