vprint bizz card

index.html

<canvas id="card" width="500" height="300">Your browser does not support this Application.</canvas>

<form>
	<input id="text-input" placeholder="Matt Kelley" />

	<select id="textFont">
		<option value="item1">Item 1</option>
		<option value="item2">Item 2</option>
		<option value="item3">Item 3</option>
		<option value="item4">Item 4</option>
		<option value="item5">Item 5</option>
	</select>

	<input type="button" id="save" value="Save">

</form>

<img id="image" src="">

main.js

(function (Card, undefined) {
'use strict';

// If they use modernizr we could do something like this.
function canvasSupport() {
	return true;
//	return Modernizr.canvas;
}

function App() {
	// die if no support
	if (!canvasSupport()) return;

	// Elements
	this.canvas = document.getElementById('card');
	this.saveButton = document.getElementById('save');
	this.textInput = document.getElementById('text-input');
	this.selectBox = document.getElementById('textFont');

	// Canvas 2d
	this.context = this.canvas.getContext('2d');

	// Select - this is just stubbed out
	this.select = this.selectBox.options.selectedIndex;

	// Text settings
	this.message = 'Matt Kelley';
	this.fontSize = '50';
	this.fontFace = 'serif';
	this.textFillColor = '#000000';
	this.textBaseline = 'middle';
	this.textAlign = 'center';
	this.fontWeight = 'normal';
	this.fontStyle = 'normal';

	// Events
	this.saveButton.addEventListener('click', this.save.bind(this), false);
	this.selectBox.addEventListener('change', this.selectChange.bind(this), false);
	this.textInput.addEventListener('keyup', this.textChange.bind(this), false);

	this.img = document.getElementById('image');

	// Render once
	this.render();

}

App.prototype.textChange = function(event) {
	this.message = event.target.value;
	this.render();
}

// This is just placeholder now
App.prototype.selectChange = function(event) {
	// Note: I think using the index will be cleaner than using the value since we are selecting another array
	console.log('was '+this.select);
	this.select = this.selectBox.options.selectedIndex;
	console.log('now '+this.select);
}

App.prototype.render = function() {
	//Background
	this.context.globalAlpha = 1;

	this.context.fillStyle = "#ffffaa";
	this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);

	//Box
	this.context.strokeStyle = "#000000";
	this.context.strokeRect(5,  5, this.canvas.width-10, this.canvas.height-10);

	//Text
	this.context.textBaseline = this.textBaseline;
	this.context.textAlign = this.textAlign;
	this.context.font = this.fontWeight + " " + this.fontStyle + " " + this.fontSize + "px " + this.fontFace;

	var xPosition = (this.canvas.width/2);
	var yPosition = (this.canvas.height/2);

	var metrics = this.context.measureText(this.message);
	var textWidth = metrics.width;

	this.context.fillStyle = this.textFillColor;
	this.context.fillText(this.message, xPosition,yPosition);
}

App.prototype.save = function() {
	this.img.classList.remove('on');
	this.img.src = this.canvas.toDataURL();
	this.img.classList.add('on');
	// could open it in new window - eventually send to server now
	// window.open(this.img.src,"vanvas","left=0,top=0,width=" + this.canvas.width + ",height=" + this.canvas.height + ",toolbar=0,resizable=0");
}

// Run it!
new App();

})(window.Card = window.Card || {});