Generate (Image) Noise with Canvas - JavaScript Snipplr Social Repository

Revision: 35805

at November 27, 2010 13:59 by Nettuts

Updated Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   number,
   opacity = opacity || .2;

   canvas.width = 45;
   canvas.height = 45;

   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         number = Math.floor( Math.random() * 60 );

         ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}
generateNoise(.1); // default opacity is .2

Revision: 35804

at November 24, 2010 07:09 by Nettuts

Updated Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   r, g, b,
   opacity = opacity || .2;

   canvas.width = 45;
   canvas.height = 45;

   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         r = Math.floor( Math.random() * 255 );
         g = Math.floor( Math.random() * 255 );
         b = Math.floor( Math.random() * 255 );

         ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}
generateNoise(.1); // default opacity is .2

Revision: 35803

at November 14, 2010 02:48 by Nettuts

Updated Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   r, g, b,
   opacity = opacity || .2;

   canvas.width = 45;
   canvas.height = 45;

   ctx = canvas.getContext("2d");

   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         r = Math.floor( Math.random() * 255 );
         g = Math.floor( Math.random() * 255 );
         b = Math.floor( Math.random() * 255 );

         ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}
generateNoise(.1); // default opacity is .2

Revision: 35802

at November 13, 2010 15:49 by Nettuts

Updated Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   r, g, b,
   opacity = opacity || .2;

   canvas.width = 45;
   canvas.height = 45;

   ctx = canvas.getContext("2d");

   for ( x = 0; x < 45; x++ ) {
      for ( y = 0; y < 45; y++ ) {
         r = Math.floor( Math.random() * 255 );
         g = Math.floor( Math.random() * 255 );
         b = Math.floor( Math.random() * 255 );

         ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}
generateNoise(.1); // default opacity is .2

Revision: 35801

at November 13, 2010 15:43 by Nettuts

Updated Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   r, g, b,
   opacity = opacity || .2;

   canvas.width = 45;
   canvas.height = 45;

   ctx = canvas.getContext("2d");

   for ( x = 0; x < 45; x++ ) {
      for ( y = 0; y < 45; y++ ) {
         r = Math.floor( Math.random() * 80 );
         g = Math.floor( Math.random() * 80 );
         b = Math.floor( Math.random() * 80 );

         ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}
generateNoise(.3);

Revision: 35800

at November 13, 2010 13:15 by Nettuts

Updated Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   r, g, b,
   opacity = opacity || .2;

   canvas.width = 100;
   canvas.height = 100;

   ctx = canvas.getContext("2d");

   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         r = Math.floor( Math.random() * 80 );
         g = Math.floor( Math.random() * 80 );
         b = Math.floor( Math.random() * 80 );

         ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}

generateNoise(.3);

Revision: 35799

at November 13, 2010 13:14 by Nettuts

Initial Code

function generateNoise(opacity) {
   if ( !!!document.createElement('canvas').getContext ) {
      return false;
   }

   var canvas = document.createElement("canvas"),
   ctx = canvas.getContext('2d'),
   x, y,
   r, g, b,
   opacity = opacity || .2;

   canvas.width = 100;
   canvas.height = 100;

   ctx = canvas.getContext("2d");

   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         r = Math.floor( Math.random() * 80 );
         g = Math.floor( Math.random() * 80 );
         b = Math.floor( Math.random() * 80 );

         ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }

   document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}

generateNoise(.3);

Initial URL

http://nettuts.s3.amazonaws.com/854_noiseWithCanvas/noise.html

Initial Description

This allows you to add image noise to the body of your website. simply call generateNoise(), pass an optional opacity parameter, and then apply a background color to the body element in your stylesheet.

It's not ideal, and maybe isn't practical -- but it works. :)

Adapted from: http://mitchj.info/blog/2010/09/generate-background-noise-with-jquery/

Initial Title

Generate (Image) Noise with Canvas

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: