wingbase/public/static/js/lib/pallet.js

function Pallet(canvas, options) {
	var self = this;

	options = options || {};

	if(typeof canvas == 'string') {
		canvas = document.getElementById(canvas.replace('#', ''));
	} else if(!canvas) {
		canvas = document.getElementsByTagName('canvas')[0];
		if(!canvas) return false;
	} else if(canvas.tagName != 'CANVAS') {
		return false;
	}

	var context = canvas.getContext('2d');

	this.canvas = canvas;
	this.context = context;

	if (!context.imageSmoothingEnabled) {
		context.webkitImageSmoothingEnabled = options.imageSmoothing || true;
		context.mozImageSmoothingEnabled = options.imageSmoothing || true;
	} else {
		context.imageSmoothingEnabled = options.imageSmoothing || true;
	}

	context.save();

	// Render single colour unstroked circle.
	this.circle = function(color, x, y, radius) {
		context.fillStyle = color;
		context.beginPath();
		context.arc(x, y, radius, 0, Math.PI * 2, false);
     	context.fill();
	};

	// Clear canvas.
	this.clear = function(x, y, w, h, color) {
		if (!h) {
			context.clearRect(0, 0, canvas.width, canvas.height);
		} else {
			context.clearRect(x, y, w, h);
		}
	};

	this.clipRect = function(x, y, w, h) {
		this.context.beginPath();
		this.context.rect(x, y, w, h);
		this.context.clip();
		this.context.closePath();
	};

	// Returns the entire canvas as a base64-encoded image string.
	this.dataURL = function() {
		return canvas.toDataURL();
	}

	// Fill screen with color.
	this.fill = function(color) {
		context.fillStyle = color;
		context.fillRect(0, 0, canvas.width, canvas.height);
	}

	// Resize canvas to window.
	this.fillScreen = function(minX, minY) {
		canvas.width = Math.max(window.innerWidth, minX || 0);
		canvas.height = Math.max(window.innerHeight, minY || 0);
		canvas.style.width = canvas.width + 'px';
		canvas.style.height = canvas.height + 'px';

		self.normalizeSize();
	};

	// Draw image. If only width is given, it will be used a scale factor.
	this.image = function (image, x, y, rotation, w, h) {
		if (typeof image == 'string') {
			var src = image;
			var img = new Image();
			img.src = src;
		} else {
			var src = image.src;
			var img = image;
		}

		if (w && !h) {
			w = img.width * w;
			var h = img.height * w;
		} else {
			var w = w || img.width;
			var h = h || img.height;
		}

		x = x || 0;
		y = y || 0;
		rotation = rotation || 0;

		if (rotation) {
			context.save();
			context.translate(x + w / 2, y + h / 2);
			context.rotate(rotation);
			context.drawImage(img, -w / 2, -h / 2, w, h);
			context.restore();
		} else {
			context.drawImage(img, x, y, w, h);
		}
	};

	// Set canvas size to canvas element size.
	this.normalizeSize = function() {
		var style = window.getComputedStyle(canvas, null);

		canvas.width = +style.width.replace('px', '');
		canvas.height = +style.height.replace('px', '');

		context.save();
	};

	// Set default opacity.
	this.opacity = function(alpha) {
		alpha = alpha || 1;
		context.globalAlpha = alpha;
	};

	// Draw rectangular outline.
	this.outline = function(color, x, y, w, h, s) {
		context.strokeStyle = color;
		context.lineWidth = s || 1;
		context.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
	};

	// Render single colour unstroked rectangle.
	this.rect = function(color, x, y, w, h) {
		context.fillStyle = color;
		context.fillRect(x, y, w, h);
	};

	// Restore canvas then save again.
	this.reset = function() {
		context.restore();
		context.save();
	};

	// Resize canvas.
	this.resize = function(w, h) {
		h = h || canvas.width;

		canvas.width = w;
		canvas.height = h;
		canvas.style.width = w + 'px';
		canvas.style.height = h + 'px';
	}

	// Just restore.
	this.restore = function() {
		context.restore();
	};

	this.save = function() {
		context.save();
	};

	// Render rect with equal sides.
	this.square = function(color, x, y, l) {
		self.rect(color, x, y, l, l);
	};

	// Render text.
	this.text = function(string, x, y, color, font, size, align, baseline) {
		context.fillStyle = color || '#fff';
		if(+size == '' + size) size = size + 'px';
		context.font = size + ' ' + font;
		context.textAlign = align || 'left';
		context.textBaseline = baseline || 'top';
		context.fillText(string, x, y);
	};

	// Transform canvas.
	this.view = function (x, y, zoom, rotation) {
		context.save();
		context.translate(x, y);
		context.rotate(rotation);
		if (zoom) this.context.scale(zoom, zoom);
	}
}