382191 - canvas - Rendering bug with Pattern.

Status: RESOLVED INCOMPLETE

(Firefox :: General, defect)

Description

[Richard Lamboj]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.1.3) Gecko/20070320 SUSE/2.0.0.3-11.2 Firefox/2.0.0.3
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.1.3) Gecko/20070320 SUSE/2.0.0.3-11.2 Firefox/2.0.0.3

See the Screenshot(it is from an WebDesktop/WebOS). It should be a Reflection of the Window. Sometimes it works and sometimes there are rendering bugs.

Javascript Source:
var obj_reflect_window = new Object();

//var image = new Image();
obj_reflect_window.image = document.createElement('img');


//============================================================
// Bilder Laden - Fenster
//============================================================
obj_reflect_window.img = new Array();

for(var i=1; i<=9;i++) {
	obj_reflect_window.img[i] = new Image();
	obj_reflect_window.img[i].src = 'system/themes/desktop/default/img/' + i + '.png';
}

//============================================================
// Bilder Laden - Buttons
//============================================================
obj_reflect_window.img_close = new Image();
obj_reflect_window.img_min = new Image();
obj_reflect_window.img_max = new Image();

obj_reflect_window.img_close.src = 'system/themes/desktop/default/img/close.png';
obj_reflect_window.img_min.src = 'system/themes/desktop/default/img/min.png';
obj_reflect_window.img_max.src = 'system/themes/desktop/default/img/max.png';


function reflect_window(WID, xwindow_width, xwindow_height) {

	var canvas = document.getElementById("canvas_" + WID);
	var context = canvas.getContext("2d");
	var pattern;

	//============================================================
	// Prüfen ob alle Bilder geladen sind.
	//============================================================
	for(var i=1; i<=9;i++) {
		if(obj_reflect_window.img[i].complete!=true) {
			window.setTimeout('reflect_window(' + WID + ',' + xwindow_width + ',' + xwindow_height + ')', 1000);
			return false;
		}
	}

	if(obj_reflect_window.img_close.complete!=true) {
		window.setTimeout('reflect_window(' + WID + ',' + xwindow_width + ',' + xwindow_height + ')', 1000);
		return false;
	}

	if(obj_reflect_window.img_min.complete!=true) {
		window.setTimeout('reflect_window(' + WID + ',' + xwindow_width + ',' + xwindow_height + ')', 1000);
		return false;
	}

	if(obj_reflect_window.img_max.complete!=true) {
		window.setTimeout('reflect_window(' + WID + ',' + xwindow_width + ',' + xwindow_height + ')', 1000);
		return false;
	}

	canvas.width = xwindow_width;
	canvas.height = xwindow_height;

	//============================================================
	// Window Image: 1
	//============================================================
	context.drawImage(obj_reflect_window.img[1], 0, 0);

	//============================================================
	// Window Image: 2
	//============================================================
	pattern=context.createPattern(obj_reflect_window.img[2],'repeat-x');

	context.fillStyle = pattern;
	context.fillRect(obj_reflect_window.img[1].width,0,xwindow_width - obj_reflect_window.img[1].width - obj_reflect_window.img[3].width,obj_reflect_window.img[2].height);

	//============================================================
	// Window Image: 3
	//============================================================
	context.drawImage(obj_reflect_window.img[3], xwindow_width - obj_reflect_window.img[3].width, 0);

	//============================================================
	// Window Image: 4
	//============================================================
	pattern=context.createPattern(obj_reflect_window.img[4],'repeat-y');

	context.fillStyle = pattern;
	context.fillRect(0,obj_reflect_window.img[1].height,obj_reflect_window.img[4].width,xwindow_height - obj_reflect_window.img[1].height - obj_reflect_window.img[7].height);

	//============================================================
	// Window Image: 5
	//============================================================
	pattern=context.createPattern(obj_reflect_window.img[5],'repeat');

	context.fillStyle = pattern;
	context.fillRect(obj_reflect_window.img[4].width,obj_reflect_window.img[2].height,xwindow_width - obj_reflect_window.img[4].width - obj_reflect_window.img[6].width,xwindow_height - obj_reflect_window.img[2].height - obj_reflect_window.img[8].height);

	//============================================================
	// Window Image: 6
	//============================================================
	//pattern=context.createPattern(obj_reflect_window.img[6],'repeat-y');

	//context.fillStyle = pattern;
	//context.fillRect(xwindow_width - obj_reflect_window.img[6].width,obj_reflect_window.img[3].height,obj_reflect_window.img[6].width,xwindow_height - obj_reflect_window.img[3].height - obj_reflect_window.img[9].height);

	var img6_canvas = document.createElement('canvas');
	var img6_context = img6_canvas.getContext("2d");
	var img6_pattern;

	img6_canvas.width = obj_reflect_window.img[6].width;
	img6_canvas.height = xwindow_height - obj_reflect_window.img[3].height - obj_reflect_window.img[9].height;

	img6_pattern=img6_context.createPattern(obj_reflect_window.img[6],'repeat-y');

	img6_context.fillStyle = img6_pattern;
	img6_context.fillRect(0,0,obj_reflect_window.img[6].width,xwindow_height - obj_reflect_window.img[3].height - obj_reflect_window.img[9].height);
	context.drawImage(img6_canvas, xwindow_width - obj_reflect_window.img[6].width,obj_reflect_window.img[3].height);

	//============================================================
	// Window Image: 7
	//============================================================
	context.drawImage(obj_reflect_window.img[7], 0, xwindow_height - obj_reflect_window.img[7].height);

	//============================================================
	// Window Image: 8
	//============================================================
	//pattern=context.createPattern(obj_reflect_window.img[8],'repeat-x');

	//context.fillStyle = pattern;
	//context.fillRect(obj_reflect_window.img[7].width,xwindow_height - obj_reflect_window.img[8].height,xwindow_width - obj_reflect_window.img[7].width - obj_reflect_window.img[8].width,obj_reflect_window.img[8].height);

	var img8_canvas = document.createElement('canvas');
	var img8_context = img8_canvas.getContext("2d");
	var img8_pattern;

	img8_canvas.width = xwindow_width - obj_reflect_window.img[7].width;
	img8_canvas.height = obj_reflect_window.img[8].height;

	img8_pattern=img8_context.createPattern(obj_reflect_window.img[8],'repeat-x');

	img8_context.fillStyle =img8_pattern;
	img8_context.fillRect(0,0,xwindow_width - obj_reflect_window.img[7].width - obj_reflect_window.img[8].width,obj_reflect_window.img[8].height);
	context.drawImage(img8_canvas, obj_reflect_window.img[7].width, xwindow_height - obj_reflect_window.img[8].height);

	//============================================================
	// Window Image: 9
	//============================================================
	context.drawImage(obj_reflect_window.img[9], xwindow_width - obj_reflect_window.img[9].width, xwindow_height - obj_reflect_window.img[9].height);

	//============================================================
	// Window Image: Close
	//============================================================
	context.drawImage(obj_reflect_window.img_close, xwindow_width - 5 - obj_reflect_window.img_close.width, 5);

	//============================================================
	// Window Image: Min
	//============================================================
	context.drawImage(obj_reflect_window.img_min, xwindow_width - 62 - obj_reflect_window.img_min.width, 5);

	//============================================================
	// Window Image: Max
	//============================================================
	context.drawImage(obj_reflect_window.img_max, xwindow_width - 35 - obj_reflect_window.img_max.width, 5);

	obj_reflect_window.image.onload = function() {
		reflect();
	}

	//============================================================
	// Reflect Window
	//============================================================
	obj_reflect_window.image.src = canvas.toDataURL();

	function reflect() {

		//if(image.complete!=true) {
			//window.setTimeout('reflect()', 1000);
			//return false;
		//}

		context.clearRect(0,0,canvas.width,canvas.height);

		context.save();

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

		context.restore();
						
		context.globalCompositeOperation = "destination-out";
		var gradient = context.createLinearGradient(0, 0, 0, obj_reflect_window.image.height*2);
					
		gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
		gradient.addColorStop(0, "rgba(255, 255, 255, 0.1)");

		context.fillStyle = gradient;

		//context.fill();
		context.fillRect(0, 0, obj_reflect_window.image.width, obj_reflect_window.image.height);
	}

} 

This is Solution don't work everytime:
pattern=context.createPattern(obj_reflect_window.img[8],'repeat-x');

context.fillStyle = pattern;
context.fillRect(obj_reflect_window.img[7].width,xwindow_height - obj_reflect_window.img[8].height,xwindow_width - obj_reflect_window.img[7].width - obj_reflect_window.img[8].width,obj_reflect_window.img[8].height);

This Works all the Time:
var img8_canvas = document.createElement('canvas');
var img8_context = img8_canvas.getContext("2d");
var img8_pattern;

img8_canvas.width = xwindow_width - obj_reflect_window.img[7].width;
img8_canvas.height = obj_reflect_window.img[8].height;

	img8_pattern=img8_context.createPattern(obj_reflect_window.img[8],'repeat-x');

img8_context.fillStyle =img8_pattern;
img8_context.fillRect(0,0,xwindow_width - obj_reflect_window.img[7].width - obj_reflect_window.img[8].width,obj_reflect_window.img[8].height);
context.drawImage(img8_canvas, obj_reflect_window.img[7].width, xwindow_height - obj_reflect_window.img[8].height);

I hope u can fix it :)

And i'am missing a Feature. Rendering HTML to a Pic with Canvas. Maybe with a Option in the Security Area to activate or deactivate this function ins JS.

Reproducible: Sometimes

Steps to Reproduce:
1.
2.
3.

Comment 1

[Tyler Downer [He/Him]]

This bug was reported on Firefox 2.x or older, which is no longer supported and will not be receiving any more updates. I strongly suggest that you update to Firefox 3.6.3 or later, update your plugins (flash, adobe, etc.), and retest in a new profile. If you still see the issue with the updated Firefox, please post here. Otherwise, please close as RESOLVED > WORKSFORME
http://www.mozilla.com
http://support.mozilla.com/kb/Managing+profiles
http://support.mozilla.com/kb/Safe+mode

Comment 2

[Tyler Downer [He/Him]]

No reply, INCOMPLETE. Please retest with Firefox 3.6.x or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.