Canvas Effects

Tags

1. 7 blur
2. 2 filters
3. 2 html5
4. 2 imageprocessing
5. 2 images
6. 2 noise
7. 1 canvas
8. 1 greyscale
9. 1 toning

19 Responses

1. Pro Dave Shea

   If anyone thought this whole Processing kick I've been on lately doesn't have much to do with the web, here's a fun counter-argument. Coming soon.

   (This is a screenshot of a Safari window, but it works fine in everything else that supports canvas.)

   over 1 year ago

2. Pro Dave Shea

   A tweet by Cameron Moll inspired this. Won't be able to do the CSS syntax, but it is working with simple classes at the moment, eg. <img class="filter filter-greyscale">

   over 1 year ago

3. Pro Erik Sagen

   If I were to use these filters (variety of them) on a photo gallery (20-30 thumbnails), what would the performance be like? Just curious.

   over 1 year ago

4. Pro Dan Cederholm

   Had always wondered if something like this was possible. Whoa!

   over 1 year ago

5. Pro Ahmed Chergaoui

   Oh!

   over 1 year ago

6. Pro Scott Boms

   Wow. I suppose I shouldn't be surprised but I am. And I can think of something that I'm working on that could use just such a thing...

   over 1 year ago

7. Pro Dave Shea

   @Erik - should be pretty damn fast. The processing happens up front, redrawing the page will be as instantaneous as if the canvas elements were images. In fact... hmm. They could just *be* images come to think of it. Canvas would be the shim that does the rendering, but it could ultimately dump the results back to an image. That would enable CSS background images too. Must try.

   over 1 year ago

8. Pro Rogie

   Whoa, totally rad! I want in!

   over 1 year ago

9. Pro Tim Van Damme

   Giddy just thinking about the possibilities...

   1likes

   over 1 year ago

10. Peter

    Oh sweet zombie jesus. Want!

    over 1 year ago

11. André Luís

    :-D

    A cool way would be to:

    1) grab all the imgs with class fx
    2) create a sprite inside the canvas (check data-* attributes for list of desired fx'es)
    3) replace the src of the image with a data-uri from the canvas
    4) use css to make use of those in whatever states we need by adjusting background-position.

    Looking forward to seeing a plug-n-play way of using this... :)

    over 1 year ago

12. Pro Dave Shea

    Good news! Despite a miserably hot day, I managed to make some good progress refactoring this so it applies nicely to the following two elements:

    <img src="lighthouse.jpg" class="filter-blur">

    <div class="filter-blur"></div>

    (where the div has a background set with CSS)

    More soon.

    3likes

    over 1 year ago

13. Pro Jeremy Anderson

    Holy radness I was just thinking about something like this.

    over 1 year ago

14. Pro Cameron Moll

    Really excited to see where this goes, Dave. I'll have probably a couple opportunities to use the method as soon as it's available.

    over 1 year ago

15. Jason Landry

    This is something I've wanted for ages, so I'll be watching very closely. Nice work Dave.

    over 1 year ago

16. Pro Trent Walton

    Next... layer-blend:color-burn; ;)

    over 1 year ago

17. Pro Tait Brown

    I wish webkit would support SVG filters already, I was looking for something like this only the other day.

    over 1 year ago

18. Pro Dave Shea

    That "more soon" thing? That'd be today.

    http://github.com/mezzoblue/PaintbrushJS

    See the demo page with example usage:

    http://mezzoblue.com/tests/canvas/lib/demo/

    Just a starting point, there's a long way to go.

    over 1 year ago

19. Pro Davin Risk

    This is ridiculously awesome.

    over 1 year ago