Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Web Development

How to Generate Noise with Canvas

Read Time:1 minLanguages:

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


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.