Canvas Foto mit einem Verlauf überlagern?

[josDesign]

Hallo, ich habe ein Skript welches bestehende png-Bilder als Spiegelung mit canvas zeichnet. Ich bin noch nicht ganz fit damit. Die Funktion welche mir das canvas erstellt sieht so aus:

	function createReflexion (cont, img) {
		var flx = false;
		
		if (document.createElement("canvas").getContext) {
			/* ---- canvas ---- */
			flx = document.createElement("canvas");
			flx.width = img.width;
			flx.height = img.height;
			var context = flx.getContext("2d");

			context.translate(0, img.height);
			context.scale(1, -1);
			context.drawImage(img, 0, 0, img.width, img.height);

			
			if(jQuery('#pp_enable_reflection').attr('value')!='')
			{
				flx.style.opacity = '0.1';
			}
			else
			{
				flx.style.opacity = '0';
			}
		} else {
			/* ---- DXImageTransform ---- */
			flx     = document.createElement('img');
			flx.src = img.src;
			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
		}
		/* ---- insert Reflexion ---- */
		flx.style.position = 'absolute';
		flx.style.left     = '-4000px';
		cont.appendChild(flx);
		return flx;
	}

Für IE =< v8 wird der MS Alpha Filter verwendet. Den anzupassen sollte keine Probleme machen.

Ich möchte also das Bild welches erstellt wird, mit einem Verlauf überlagen, welcher von transparenz (also eigentliches Bild sichtbar) nach Weiss verläuft.

Ich habe dazu bereits mit context.createLinearGradient() verseucht aber ohne Erfolg.


Hat evtl. jemand einen Tipp für mich?

Mit bestem Dank im Voraus,
jos