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.
- Reflection
- Comments(4)
I demand that you show us the code
I’m assuming it’s similar to the way the guy in the blog post did it (view > source).
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.
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