Experimenting with Canvas

December 15th, 2005

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


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. 

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:

About Ken

Ken Lo

My passion is helping people to get the most out of their mobile phone. I've been blogging at Ken's Tech Tips since 2005.

Aside from writing about mobile technology, my interests are in software development, digital marketing and physics. Outside of the blog, I work with numerous technology companies helping them to explain their product and helping them to market it to consumers. Please get in touch for more information.

Your Comments

We'd love to hear your thoughts and any questions you may have. So far, we've received 4 comments from readers. You can add your own comment here.

  1. Carlos Marques said:

    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!!

  2. Khlo said:

    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.

  3. Justin said:

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

  4. Skov said:

    I demand that you show us the code

Leave a Reply

E-Mail Notifications: By default, I'll drop you an e-mail when there's a reply to your comment. If you don't want to receive such a notification, please select the "Don't Subscribe" option from the dropdown menu above.