var canvas;
var context;

function setup() {
	canvas = document.getElementById('cnvs');
	if(canvas.getContext) {
		context = canvas.getContext('2d');
		drawRect();
		drawLine();
		drawTriangle();
		drawArc();
		drawCircle();
		drawQCurve();
		drawCCurve();
		placeImage();
	}
}

function drawRect() {
	context.fillStyle = '#ff0000';
	context.fillRect(10, 10, 100, 100);
	
	context.strokeStyle = '#0000ff';
	context.lineWidth = 5;
	context.strokeRect(150, 10, 100, 100);
}

function drawLine() {
	context.strokeStyle = 'rgba(255, 191, 0, 1.0)';
	context.lineWidth = 3;
	context.beginPath();
	context.moveTo(300, 10);
	context.lineTo(400, 110);
	context.stroke();
}

function drawTriangle() {
	context.strokeStyle = 'hsla(90, 100%, 50%, 1.0)';
	context.fillStyle = 'hsla(90, 100%, 50%, 0.5)'
	context.lineWidth = 3;
	context.beginPath();
	context.moveTo(450, 10);
	context.lineTo(550, 110);
	context.lineTo(450, 110);
	context.closePath();
	context.fill();
	context.stroke();
}

function drawArc() {
	context.strokeStyle = 'hsla(135, 100%, 50%, 1.0)';
	context.fillStyle = 'hsla(135, 100%, 50%, 0.5)';
	context.beginPath();
	context.arc(650, 60, 50, 0, (Math.PI/180) * 90, false);
	context.fill();
	context.stroke();
}

function drawCircle() {
	context.strokeStyle = 'hsla(180, 100%, 50%, 1.0)';
	context.fillStyle = 'hsla(180, 100%, 50%, 0.5)';
	context.beginPath();
	context.arc(60, 210, 50, 0, (Math.PI/180) * 360, true);
	context.fill();
	context.stroke();
}

function drawQCurve() {
	context.strokeStyle = 'hsla(225, 100%, 50%, 1.0)';
	context.beginPath();
	context.moveTo(150, 160);
	context.quadraticCurveTo(150, 260, 250, 260);
	context.stroke();
}

function drawCCurve() {
	context.strokeStyle = 'hsla(270, 100%, 50%, 1.0)';
	context.beginPath();
	context.moveTo(300, 160);
	context.bezierCurveTo(300, 260, 400, 160, 400, 260);
	context.stroke();
}

function placeImage() {
	var img = new Image();
	img.onload = function() {
		context.drawImage(img, 450, 160, 100, 100);
	};
	img.src = "images/photo.jpg";
}