function draw_bg(w, h) {
	var canvas = $("#bg")[0];
	var cv = $("#bg");
	var ctx = canvas.getContext("2d");
	
	ctx.canvas.width  = w; //window.innerWidth;
  	ctx.canvas.height = h; //window.innerHeight;
	
	bottom = cv.height();
	width = cv.width();
	
	h_center_container = window.innerHeight * 0.7; // Height of center

	h_left_container = h_center_container / 3.3; //50;
	h_right_container = h_center_container / 1.5;
	
	x_center_top = 0.7 * width; // Center of top
	center_tilt = 0;
	
	ctx.fillStyle = "#f4f5f0";
	ctx.beginPath();
	ctx.moveTo(0, bottom); // bottom, 0
	ctx.lineTo(0, bottom - h_left_container); // bottom - (height of left container)
	ctx.lineTo(x_center_top, bottom - h_center_container);
	ctx.lineTo(x_center_top + center_tilt, bottom);
	ctx.fill();
	

	ctx.fillStyle = "#b6c29e";
	ctx.beginPath();
	ctx.moveTo(x_center_top + center_tilt, bottom);
	ctx.lineTo(x_center_top, bottom - h_center_container);
	ctx.lineTo(width, bottom - h_right_container);
	ctx.lineTo(width, bottom);
	ctx.fill();
	
	
	ctx.fillStyle = "#1d6a64";	
	ctx.beginPath();
	ctx.moveTo(0, bottom);
	ctx.lineTo(0, bottom - (h_left_container * 0.23));
	ctx.lineTo(x_center_top, bottom - (h_center_container * 0.5));
	ctx.lineTo(x_center_top, bottom - (h_center_container * 0.34));
	ctx.lineTo(0, bottom);
	ctx.fill();
	
	ctx.fillStyle = "#1d6a64";	
	ctx.beginPath();
	ctx.moveTo(0, bottom - (h_left_container * 0.54));
	ctx.lineTo(0, bottom - (h_left_container * 0.64));
	ctx.lineTo(x_center_top, bottom - (h_center_container * 0.77));
	ctx.lineTo(x_center_top, bottom - (h_center_container * 0.70));
	ctx.lineTo(0, bottom - (h_left_container * 0.54));
	ctx.fill();
	
	ctx.fillStyle = "#153736";	
	ctx.beginPath();
	ctx.moveTo(x_center_top, bottom - (h_center_container * 0.34));
	ctx.lineTo(x_center_top, bottom - (h_center_container * 0.5));
	ctx.lineTo(width, bottom - (h_right_container * 0.48));
	ctx.lineTo(width, bottom - (h_right_container * 0.31));
	ctx.fill();
	
	ctx.fillStyle = "#153736";	
	ctx.beginPath();
	ctx.moveTo(x_center_top, bottom - (h_center_container * 0.70));
	ctx.lineTo(x_center_top, bottom - (h_center_container * 0.77));
	ctx.lineTo(width, bottom - (h_right_container * 0.76));
	ctx.lineTo(width, bottom - (h_right_container * 0.69));
	ctx.fill();
	
	
	ctx.font = '15px arial,sans-serif' ;
	ctx.fillStyle = '#153736' ;
	ctx.setTransform (0.8, -0.285, 0, 1, 0, 0);
	ctx.setTransform (0.8, -0.220, 0, 1, 0, 0);
	//ctx.fillText ('children shouldnt play with dead things, only crawl, so your lonely sad eyes, cry crimson, blood.', 80, bottom - (h_left_container * 0.23) + 15) ;
	ctx.setTransform (1, 0, 0, 1, 0, 0);
}

function draw_arrow() {
	$("canvas.arrow").each(function(index, value) {
		var canvas = $(".arrow")[index];
		var cv = $(".arrow");
		var ctx = canvas.getContext("2d");
		bottom = cv.height();
		right = cv.width();

		ctx.fillStyle = "rgba(0,0,0,0.62)";
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(right / 2, bottom);
		ctx.lineTo(right, 0);
		ctx.fill();	
	})	
}

function draw_landscape() {
	var canvas = $("canvas#landscape")[0];
	var cv = $("canvas#landscape");
	var ctx = canvas.getContext("2d");
	bottom = cv.height();
	right = cv.width();
    
	// background
	ctx.fillStyle = '#e63a30';
	ctx.fillRect(0, 0, right, bottom);
		
	// circle
	ctx.fillStyle = '#e26390';
	ctx.beginPath();
	ctx.arc(260, 150, 60, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	
	// strokes
	ctx.fillStyle = '#e63a30';
	ctx.beginPath();
	ctx.fillRect(0, 150, right, 5);
	ctx.fillRect(0, 140, right, 4);
	ctx.fillRect(0, 130, right, 3);
	ctx.fillRect(0, 120, right, 2);
	ctx.fillRect(0, 110, right, 1);	
	ctx.closePath();
	ctx.fill();
	
	ctx.fillStyle = '#e26390';
	ctx.beginPath();
	ctx.fillRect(0, 155, right, 1);
	ctx.fillRect(0, 165, right, 2);
	ctx.fillRect(0, 175, right, 3);
	ctx.fillRect(0, 185, right, 4);
	ctx.fillRect(0, 195, right, 5);
	ctx.fillRect(0, 205, right, 6);	
	ctx.fillRect(0, 215, right, 7);
	ctx.fillRect(0, 225, right, 8);
	ctx.fillRect(0, 235, right, 9);
	ctx.fillRect(0, 245, right, 10);
	ctx.fillRect(0, 255, right, 60);				
	ctx.closePath();
	ctx.fill();
		
		
		


	// pyramids
	ctx.fillStyle = '#ecc8a4';
	ctx.beginPath();	
	ctx.moveTo(0, bottom);
	ctx.lineTo(80, bottom-140);
	ctx.lineTo(160, bottom);
	ctx.closePath();	
	ctx.fill();
	
	ctx.fillStyle = '#ecc8a4';
	ctx.beginPath();	
	ctx.moveTo(160, bottom);
	ctx.lineTo(160 + 40, bottom-70);
	ctx.lineTo(160 + 80, bottom);
	ctx.closePath();	
	ctx.fill();
	
	ctx.fillStyle = '#ecc8a4';
	ctx.beginPath();	
	ctx.moveTo(240, bottom);
	ctx.lineTo(240 + 60, bottom-80);
	ctx.lineTo(240 + 120, bottom);
	ctx.closePath();	
	ctx.fill();
}
