function drawTitleScreen(context, canvas) {

	var width = canvas.width = 650;
	var height = canvas.height = 500;

	context.save();	

	var gradient = context.createRadialGradient(width/2, height/2, width*5/6, width/2-60, height/2, width/6);
	gradient.addColorStop(0.2, "#F90");
	gradient.addColorStop(0.9, "#FE9");
	context.fillStyle = gradient;
	context.fillRect(0, 0, width, height);
	
	context.rotate(-0.2);
	context.font = "32px Comic Sans, Comic Sans MS, cursive";
	context.fillStyle = "#369";
	var base = 220;
	context.fillText("Share your screenshot in 3 clicks...", 15, base);	
	context.fillText("1. Print Screen", 115, base+60);	
	context.fillText("2. Paste", 140, base+105);	
	context.fillText("3. Save", 165, base+150);	
	
	context.restore();
}

function drawProcessingScreen(context, canvas) {

	var width = canvas.width = 650;
	var height = canvas.height = 500;

	context.save();	

	var gradient = context.createRadialGradient(width/2, height/2, width*5/6, width/2-60, height/2, width/6);
	gradient.addColorStop(0.2, "#F90");
	gradient.addColorStop(0.9, "#FE9");
	context.fillStyle = gradient;
	context.fillRect(0, 0, width, height);
	
	context.font = "32px Comic Sans, Comic Sans MS, cursive";
	context.fillStyle = "#369";
	context.textAlign = "center";
	context.fillText("Please wait! Processing...", width/2, height/2);	
	
	context.restore();

}