if (window.addEventListener) { 
	window.addEventListener( "load", buildKoffer, false ); 
}
else if (window.attachEvent){
  window.attachEvent('onload', buildKoffer);
}

function koffer(context, line, fillColor, strokeColor, width, height, tanw, tanh, offs) 
{ 
	this.context = context; 
	this.context.lineWidth = line; 
	this.context.moveTo(tanw + offs, offs); 
	this.context.fillStyle = fillColor; 
	this.context.strokeStyle = strokeColor; 
	var ax = width + offs; 
	var ay = height + offs; 
	var x = width - tanw + offs; 
	var y = height - tanh + offs; 
	this.context.quadraticCurveTo( ax,  offs, x,              offs );    // 1
	this.context.quadraticCurveTo( ax,  offs, ax, tanh + offs );    // 2
	this.context.quadraticCurveTo( ax,    ay, ax,                 y );    // 3
	this.context.quadraticCurveTo( ax,    ay, x,                 ay );    // 4
	this.context.quadraticCurveTo( offs,  ay, tanw + offs, ay );    // 5
	this.context.quadraticCurveTo( offs,  ay, offs,               y );    // 6
	this.context.quadraticCurveTo( offs, offs, offs, tanh + offs );  // 7
	this.context.quadraticCurveTo( offs, offs, tanw + offs, offs );  // 8
	this.context.fill(); 
	this.context.stroke(); 
	return this.context; 
} 
function buildKoffer() 
{
    if (document.getElementById("canvas")) {
    	var canvas = document.getElementById("canvas"); 
    	var context = canvas.getContext("2d"); 
    
   	 context.beginPath(); 

		var ctx = new koffer(context, 10, "rgba(250,230,150,0.6)", "rgba(250,150,150,0.6)", 420, 200, 40, 40, 10); 
		context.closePath(); 
	}
}