Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save softprops/854111 to your computer and use it in GitHub Desktop.
Save softprops/854111 to your computer and use it in GitHub Desktop.
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%'
});
};
jQuery.fn.colorTile = 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 += 10) {
for (y=0; y<canvas.height; y += 10) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
ctx.fillStyle = "rgba("+r+","+g+","+b+","+opacity+")";
ctx.fillRect(x, y, 4, 7);
}
}
wrapper.css({
'background-image': "url("+canvas.toDataURL("image/png")+")",
width: '100%',
height: '100%'
});
};
jQuery.fn.grain = 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 += 5) {
for (y=0; y<canvas.height; y += 5) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
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%'
});
};
jQuery.fn.graphPaper = 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 += 10) {
for (y=0; y<canvas.height; y += 10) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
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%'
});
};
jQuery.fn.notebook = 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 += 15) {
var r = Math.floor(Math.random() * 5);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
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%'
});
};
@methodin
Copy link

methodin commented Mar 4, 2011

Packaged into a single jQuery plugin: http://jsfiddle.net/methodin/gPejK/

@softprops
Copy link
Author

whoa jsfiddle rocks!

@methodin
Copy link

methodin commented Mar 6, 2011

Haha indeed. BTW packaged it up @ https://github.com/methodin/jQuery-Canvas-Background

@softprops
Copy link
Author

awesome. I love github

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment