noise function for canvas

canvas noise

/**
 * creates a noise on the specified 2d context's canvas
 * @ctx a 2d context
 * @rgba color code specifies which channels are affected (default = 0 )
 * @min noise lower bound ( >= 0 )
 * @max noise upper bound ( <= 0xFF )
 * */
function noise( ctx, rgba, min, max )
{

    /*
    RGBA mode. possible values

    OPAQUE
      0 : opaque greyscale ( white noise + black background )
      1 : opaque red    ( red channel + black background )
      2 : opaque green  ( green channel + black background )
      3 : opaque red + green
      4 : opaque blue   ( blue channel + black background )
      5 : opaque red + blue
      6 : opaque green + blue
      7 : opaque red + green + blue

    TRANSPARENT
      8 : transparent alpha    ( black + transparent background )
      9 : transparent red      ( red channel + transparent background )
     10 : transparent green    ( green channel + transparent background )
     11 : transparent red + green
     12 : transparent blue     ( blue channel + transparent background )
     12 : transparent red + green
     13 : transparent red + blue
     14 : transparent green + blue
     15 : transparent red + green + blue

     */
    if( rgba == null ) rgba = 0;

    var r = ( rgba & 1 ) != 0;
    var g = ( rgba & 2 ) != 0;
    var b = ( rgba & 4 ) != 0;

    var rv = r ? 1 : 0;
    var gv = g ? 1 : 0;
    var bv = b ? 1 : 0;

    var color = !( !r && !g && !b );

    var alpha = ( rgba & 8 ) != 0;
    var alpha_div = ( rv + gv + bv );
    if( alpha_div == 0 )alpha_div = 1;

    /*
     NOISE lower & upper bounds
     */
    min = min || 0;
    max = max || 0xFF;
    var delta = ( max - min );

    var img = ctx.getImageData( 0, 0, ctx.canvas.width, ctx.canvas.height );
    var data = img.data;

    for( var i = 0; i < data.length; i += 4 )
    {

        if ( !color )
        {
            var val = min + ( parseInt(Math.random() * delta) );
            data[i] = data[i + 1] = data[i + 2] = val;
        }
        else
        {
            if( r ) rv =    data[i]        = min + ( parseInt( Math.random() * delta ) );
            if( g ) gv =    data[i + 1]    = min + ( parseInt( Math.random() * delta ) );
            if( b ) bv =    data[i + 2]    = min + ( parseInt( Math.random() * delta ) );
        }

        if( alpha )
        {
            if( color )
            {
                data[i + 3] = parseInt( ( rv + gv + bv ) / alpha_div );
            }
            else
            {
                data[i + 3] = parseInt( Math.random() * 0xFF );
            }
        }
        else
        {
            data[i + 3] = 255;
        }

    }
    ctx.putImageData( img,0,0 );

}

noise test

//test

var i = 0;
var w = 0xFF;
var h = 0x80;
var padding = 16;

for( var y = 0; y < 4; y++ )
{
    for( var x = 0; x < 4; x++ )
    {

        //create & place canvas
        var c = document.createElement( "canvas" );
        c.width  = w;
        c.height = h;
        c.style.position = "absolute";
        c.style.padding = padding + "px";
        c.style.left = x * ( w + padding * 2 ) + "px";
        c.style.top  = y * ( h + padding * 2 ) + "px";
        c.style.width  = w + "px";
        c.style.height = h + "px";
        document.body.appendChild( c );


        //compute noise
        var ctx = c.getContext( "2d" );
        noise( ctx, i, 0, 0xFF );


        //writing text
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#000";
        ctx.fillStyle = "#FFF";
        ctx.font = "small-caps 14px Verdana";
        ctx.strokeText("noise( ctx, "+ i +", 0, 0xFF )", 16,32);
        ctx.fillText("noise( ctx, "+ i +", 0, 0xFF )", 16,32);

        i++;

    }

}


//background pattern
var bg = document.createElement("canvas");
bg.width  = w = 16;
bg.height = h = 16;
ctx = bg.getContext( "2d" );


ctx.strokeStyle = "#BBB";
ctx.lineWidth = .1;
for( y = 0; y < h; y++ )
{
    for( x = 0; x < h; x++ )
    {
        if( x == y-h/2 )        ctx.strokeRect( x, y, 1,1 );
        if( x == h/2-y )        ctx.strokeRect( x, y, 1,1 );
        if( h-x == h/2-y )      ctx.strokeRect( x, y, 1,1 );
    }
}
document.body.style.backgroundImage = "url(" + bg.toDataURL("image/png")+ ")";