function draw() {
	var canvas = document.getElementById('canvas');
		$("canvas").hide();

	var fullWidth = 1220;
	var fullHeight = 754;
	var ctx = document.getElementById('canvas').getContext('2d');
	
	var radgrad2 = ctx.createRadialGradient(fullWidth/2,fullHeight/1.15,1,fullWidth/2,fullHeight/1.15,842);
	radgrad2.addColorStop(0.4, 'rgba(0,0,0,0)');
	radgrad2.addColorStop(1, 'rgba(0,0,0,1)');
	
	var lineGrad1 = ctx.createLinearGradient(0,0,0,fullHeight);
	lineGrad1.addColorStop(0, 'rgba(0,0,0,0)');
	lineGrad1.addColorStop(1, '#000');
	
	// create new image object to use as pattern
	var img = new Image();
	img.src = 'image/design/pixel.gif';
	img.onload = function(){
		// pixel pattern
	var ptrn = ctx.createPattern(img,'repeat');
	ctx.fillStyle = ptrn;
	ctx.fillRect(0,0,fullWidth,fullHeight);
	}

	


	function rad() {
		// radial gradient rectangle
		ctx.fillStyle = radgrad2;
		ctx.fillRect(0,0,fullWidth,fullHeight);
		// linear gradient rectangle
		ctx.fillStyle = lineGrad1;
		ctx.fillRect(0,0,fullWidth,fullHeight);


		$("canvas").fadeIn("slow");
		
	}

	setTimeout(rad, 400);
	// For some reason, it takes so much longer to draw the patterned rectangle that if you don't set a timeout to draw the other ones, the patterned one always shows up on top. This didn't matter before, when *globalCompositeOperation = 'darker'* was capable of fixing this problem, but it has since gone out of style with the browsers.


}
window.onload = draw;