Javascript: image reflection sur la droite et la gauche d'une image

Bonjour,
j'essaie de coder une fonction en javascript qui me permette de dessiner un fondu sur la droite et la gauche d'une image en reprenant l'image principale. Comme le font déjà de nombreux scripts en reflétant sur le bas de l'image, l'image même inversée avec un dégradé sur la couleur de fond. (http://cow.neondragon.net/stuff/reflection/)

M'inspirant fortement des scripts déjà existant j'utilise pour ça une symétrie et une translation sur un objet context2d. Mon problème est de positionner l'image ainsi obtenue sur la droite et sur la gauche de l'image de départ.
En effet rien ne se dessine au dessus du bas de l'image d'origine.. Comme si l'espace de dessin était limité sur le dessus par le bas de l'image d'origine.. Impossible donc de positionner les rendus sur la droite et sur la gauche même de l'image d'origine.

Une idée?

Bonjour,

Et en créant un canvas qui intégrera l'image dedans ça ne marche pas ?

Voici le code concerné:

var d = document.createElement('div');
var canvas = document.createElement('canvas');

				if (canvas.getContext) {
					var context = canvas.getContext("2d");

					p.parentNode.replaceChild(d, p);
					
					d.appendChild(p);
					d.appendChild(canvas);

p étant l'image d'origine passée en paramètre

Est-ce que le problème ne viendrait pas du div (d) créé à la volée et qui se trouverait en bas de l'image?
Modifié par WildInTheWoods (15 Oct 2009 - 17:45)