Noisy backgrounds with canvas and css

Forked from Wizcover's http://jsfiddle.net/SfzPc/14/ see also http://stackoverflow.com/questions/8580541/a-way-to-create-random-noise-background-image-png-with-javascript My additions are the rgba mode and the colored background image

HTML

<!-- Forked from Wizcover's http://jsfiddle.net/SfzPc/14/ see also
http://stackoverflow.com/questions/8580541/a-way-to-create-random-noise-background-image-png-with-javascript
My additions are the rgba mode and the colored background image -->

<p id="num"></p>
<div id="adiv"></div>
<canvas id="acanvas"></canvas>
<p id="base64"></p>

CSS

body {
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    padding: 10px;
    background: #32353c;
}
#adiv {
    width: 200px;
    height: 200px;
    background-color: #ebe8e3;
}

#acanvas {
    display: none;
    width: 10px;
    height: 10px;
    border: 1px solid red;
}

JavaScript

var canvas = document.getElementById("acanvas");

var w = canvas.width = 50;
var h = canvas.height = 50;

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

for (i = 0; i < w; i++) {
    for (j = 0; j < h; j++) {

        var num = Math.floor(Math.random() * 255)
        context.fillStyle = "rgba(" + num + "," + num + "," + num + "," + .02 + ")";
        context.fillRect(i, j, 1, 1);
    }
}

$("#adiv").css({
    "background-image": "url(" + canvas.toDataURL() + ")"
});
$("#num").html("Debug, now showing num: " + num);
$("#base64").html("Use this image as static data in css:<br> background-image: url(" + canvas.toDataURL() + ")");