Tags
CanvasReflection, JavaScript, Canvas, Dragonfly, ImageFlow, CSS, GitHub, Git, JavaScriptObject, Rare Exports, Christmas, YouTube, CINEMA 4D, C.O.F.F.E.E., iPhone, iPod Touch, SketchUp, VVVV, Fun, TYPO3, Kunst, Studium, YouFlow, Highslide JS, Game, Portal, Phone, Sweden, Interest, PHP, ASP.NET, RSS, Feuerwerk, Unterwegs, Hardware, Design, Vimeo, Code, 3D, TED, Web, Refactoring, Simulation, Flüssigkeiten, Maya, Joost, TV, Inspiration, Musik, Search, Nostalgie, Spielkram, Physik, Google, Microsoft, Photosynth, Demoscene, Farbrausch, Processing
Datum
Oktober 2010
Juni 2010
März 2010
Januar 2010
Dezember 2009
August 2009
Juli 2009
Mai 2009
April 2009
März 2009
Februar 2009
Dezember 2008
November 2008
Oktober 2008
September 2008
August 2008
April 2008
März 2008
Februar 2008
Januar 2008
Dezember 2007
November 2007
Oktober 2007
September 2007
August 2007
Juli 2007
Juni 2007
Mai 2007
März 2007
CanvasReflection, JavaScript, Canvas von Finn Rudolph
I was always interested if the pixel based canvas element is fast enough to provide client-side image reflections. This is my first experiment on that topic. You can try the demo and download the whole thing from GitHub.
Reflections are pretty simple with the canvas element (18 lines of code): Just create a canvas and set the height to the source image height plus the height of the reflection. Then draw the source image and a mirrored source image. Place a gradient over the mirrored image and set the globalCompositeOperation to destination-out.
The problem is, that if you want to scale the canvas you have to redo all the canvas drawing, since it is pixel based.
Icons by: FastIcon.com
Update: Also works nicely with eleven transparent PNG images.