$(document).ready(function() 
{  
	$("div[@class^='keyword_body']").backgroundCanvas(); 
	$("div[@class^='main_n']").backgroundCanvas();
});

// Draw the background  on load and resize
$(window).load(function () 
{ 
	DrawBackground(); 
});

$(window).resize(function()
{
	DrawBackground(); 
});


function DrawBackground()
{

	$("div[@class^='keyword_body']").backgroundCanvasPaint(Demo1BackgroundPaintFkt); 
	$("div[@class^='main_n']").backgroundCanvasPaint(Demo1BackgroundPaintFkt);

}



function Demo1BackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:14,  border: 0 };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(1 ,'#FFFFCC');
		backgroundGradient.addColorStop(0, '#66CC33');
		context.fillStyle = "#9999EF";
		
		// Draw the blue border rectangle 
		$.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient; 
		$.canvasPaint.roundedRect(context,options);
}