HTML5 Image Effects App – Adding Noise and Invert

Today we continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that and for you too. Today we will be adding two new filters – Noise and Invert.

Step 3. JS

Since today I don`t will publich whole script code again and again, but will publish our new functions which we using. Full version of script you can find in our package. First function for Noise effect:

We will generate colored noise. As you can see, during walking through all pixels we generating different coefficients for each color channel (red/green/blue). And in result – multiply our source pixel info to these coefficients. In result – we have noise effect. Next function is Invert, here are code:

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more