function DrawContext(elem, image) {

	// Always check for properties and methods, to make sure your code 
	// doesn't break in other browsers.
	if (elem && elem.getContext) {
	  // Get the 2d context.
	  // Remember: you can only initialize one context per element.
	  var context = elem.getContext('2d');
	  if (context) {
		// You are done! Now you can draw your first rectangle.
		// You only need to provide the (x,y) coordinates, followed by the
		// width and height dimensions.
		DrawBackground(context, image);
		DrawTP(context, image);
		DrawNow(context, image);
	  }
	}
}

function DrawNow(ctx, image) {
	var line = image['nowline'];
	if (line.y < image.y) {
		ctx.fillStyle = 'rgb(255,255,0)';
		ctx.fillRect(
			image['pad'] + line.x, 
			image['pad'] + line.y, 
			line.length, 1);
	}
}

function DrawTP(ctx, image) {
	for (var i = 0; i < image['lines'].length; i++) {
		ctx.fillStyle = 'rgb(255,0,0)';
		var line = image['lines'][i];
		ctx.fillRect(
			image['pad'] + line.x, 
			image['pad'] + line.y, 
			line.length, 1);
	}
}

function DrawBackground(context, image) {
	context.scale(2, 2);
    context.fillRect(0, 0, 
		image.x + 2 * image['pad'], 
		image.y + 2 * image['pad']);

	// vertical tick lines
	context.fillStyle = 'rgb(64,192,64)';
	var interval = (image.x) / 6;
	for (var i = 1; i < 6; i++) {
		context.fillRect(
			image['pad'] + (i * interval), 0, 1, 
			image.y + 2 * image['pad']);
	}

	// horizontal tick lines
	context.fillStyle = 'rgb(96,96,96)';
	var days = image.y / 2;
	interval = 2;
	for (var i = 0; i < days; i++) {
		context.fillRect(image['pad'], image['pad'] + (i * interval), 
			image.x, 1);
	}

}