Friday, August 3rd, 2007

Edge.js: Mask your images with unobtrusive JavaScript

Category: Canvas, JavaScript, Library

Christian Effenberger is back with some more Canvas goodness. He has created Edge.js, a library that lets you apply an image mask (in the form of another image) to any image via unobtrusive CSS.

You initialize via:


  1. <script type="text/javascript">
  2. var mask2load = new Array();
  3. mask2load[0] = "masks/8bit/crippleedge.png";
  4. mask2load[1] = "masks/8bit/frizzedge.png";
  5. mask2load[2] = "masks/8bit/softedge.png";
  6. mask2load[3] = "masks/8bit/splatteredge.png";
  7. mask2load[4] = "masks/8bit/waveedge.png";
  8. </script>
  9. // else only this line...
  10. <script type="text/javascript" src="edge.js"></script>

And then you can simple add classes to the image: class=”edge imask1″.


Posted by Dion Almaer at 8:20 am

4.2 rating from 63 votes


Comments feed TrackBack URI

I can see several of these scripts coming in handy, replacing many CSS based effects I’ve been using in the past. Regrettably, the code isn’t GPL’d and the license terms are too restricting, not to mention subject to change. Are there similar GPL’d or LGPL’d scripts available?

Comment by Similar GPL scripts available? — August 5, 2007

If the code were GPL’d, then I’d give it 5 stars. I do like it, but, I’m sure someone soon will do the same and it’ll have a less restrictive license attached.

Comment by johno — August 5, 2007

Today 19-Nov-2007 I’ve added full support for IE.

Comment by Christian Effenberger — November 19, 2007

Leave a comment

You must be logged in to post a comment.