64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

How to Generate Noise with Canvas

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

Not too long ago, I noted on Twitter that it'd be fantastic if, one day, CSS3 provided support for adding noise to elements (not audio, but texture). After a bit of experimentation and Googling, I came across a solution that uses JavaScript and canvas to dynamically create noise.


The Screencast


Final Source


Conclusion

The big question: is it practical to use a solution like this? Ehh -- technically, sure. Browsers that don't support canvas will simply display a solid background color. That being said, a tiny 24-bit PNG still works perfectly, and is what I'll most likely continue to use until a more convenient solution becomes available.

What do you think? Or better yet, do you know of a better solution? Mostly, the purpose of this tutorial is mostly to work with canvas a bit, and toy around with things! Thanks for watching, and thank you to Dennis Hotson for the concept.

Advertisement