Experimenting with Canvas

December 15th, 2005

Been experimenting a bit with canvas today with a bit of inspiration from this.

Screenshot 

I wrote some Javascript which will get the script to search through the document for all images with a certain class and then to use the canvas tag and Javascript to generate a reflection. Using unobtrusive Javascript, all existing images will then be replaced with the canvas enhanced images with reflection.

Canvas is really really good. There are some things that I want to tidy up such as not being able to use different sized images, making the image replacement work and only using canvas to generate the reflection so the image-specific commands can still be accessed through the right click menu.

Mozilla Developer Centre is fantastic for canvas documentation. 

    

About Ken
Ken Lo

My mission is to demystify the world of mobile technology for general audiences and to communicate how mobile technology can enhance every aspect of our daily lives. I've been maintaining the Ken's Tech Tips website since 2004.

I have experience communicating mobile technology and presenting new mobile products both online and offline, including at various trade shows and events. You can check out my profile or drop me an e-mail.

Like this tip? Get the most from your mobile phone...

  • Discover brand new ways to use your mobile phone
  • Techniques to get more out of your mobile phone for less
  • Be the first to learn about new mobile technology

Enter your email to receive free regular Ken's Tech Tips:

  • Reflection
  • Comments(4)

4 Responses to “Experimenting with Canvas”

  1. # Skovon 15 Dec 2005 at 9:27 pm

    I demand that you show us the code

  2. # Justinon 15 Dec 2005 at 9:54 pm

    I’m assuming it’s similar to the way the guy in the blog post did it (view > source).

  3. # Khloon 15 Dec 2005 at 10:24 pm

    Yep, it’s quite similar but I wrote it from scratch and there are several differences in that it uses unobtrusive javascript, it is more portable and its designed to add reflections to images on existing pages.

  4. # Carlos Marqueson 28 Nov 2007 at 7:06 am

    Hi every body I downloaded the reflection file v1.7 and I liked very much.

    Beatiful effects..

    However like someone just said, for big images in IE the reflection is not so good.

    So.. I tried to work around and make my changes and here there are at line 88 of the script I added this:

         var reflection = document.createElement(‘img’);
        reflection.src = p.src;
        reflection.style.width = reflectionWidth+’px’;

    //  * as minhas alterações para funcionar melhor
        reflection.id = "reflect2";
        reflection.style.top = divHeight+’px’;
        reflection.style.height = p.height+’px’;
    //  * ——————————
        
        reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+’px’;

    For me it works 

    Enjoy the reflections with big images!!

    See the site http://www.seacoastiberia.com with the new script

     

Trackback URI | Comments RSS

Leave a Reply