jQuery background-noise

jquery.background-noise.js

jQuery.fn.noisy = function(opacity) {
  if (typeof(opacity) === 'undefined') {
    opacity = 0.1;
  }

  var wrapper = jQuery(this).wrapInner('<div />').children();
  var canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 100;
  var ctx = canvas.getContext("2d");
  var x, y;
  for (x=0; x<canvas.width; x += 1) {
    for (y=0; y<canvas.height; y += 1) {
      var r = Math.floor(Math.random() * 75);
      var g = Math.floor(Math.random() * 75);
      var b = Math.floor(Math.random() * 75);
      ctx.fillStyle = "rgba("+r+","+g+","+b+","+opacity+")";
      ctx.fillRect(x, y, 1, 1);
    }
  }

  wrapper.css({
    'background-image': "url("+canvas.toDataURL("image/png")+")",
    width: '100%',
    height: '100%'
  });
};

sweet trick!

you can do lots of interesting things just by tweaking the params https://gist.github.com/854111. pretty neat technique. also, you might want to check out http://net.tutsplus.com/tutorials/javascript-ajax/how-to-generate-noise-with-canvas/