Mootools excanvas wrapper, because ibolmo moocanvas doesn't support image rotate well. MIT Licenced - Daniel Steigerwald (daniel.steigerwald.cz)

Mootools excanvas wrapper.js

/*
*	Mootools excanvas wrapper, because ibolmo moocanvas doesn't support image rotate well.
*  
* MIT Licenced - Daniel Steigerwald (daniel.steigerwald.cz)
*
*/
var Canvas = new Class({

	initialize: function() {
		var params = Array.link(arguments, { document: Document.type, properties: Object.type });
		this.element = (params.document || document).newElement('canvas').set(params.properties);
		if (Browser.Engine.trident) {
			this.element = G_vmlCanvasManager.initElement(this.element);
		}
	},

	// IE Canvas has to be in DOM to getContext method work
	inject: function(el, where) {
		$(this.element).inject(el, where);
		this.context = this.element.getContext('2d');
		return this;
	},

	dispose: function() {
		$(this.element).dispose();
	},

	// also clear canvas area
	setSize: function(size) {
		this.element.width = size.x; // this clear canvas area
		this.element.height = size.y; // this clear canvas area
		/*if (Browser.Engine.trident) {
			this.context.element.style.width = size.x + 'px';
			this.context.element.style.height = size.y + 'px';
		}
		else {
			this.element.style.width = size.x + 'px';
			this.element.style.height = size.y + 'px';
		}*/
		return this;
	},

	setStyles: function(styles) {
		this.element.setStyles(styles);
		return this;
	},

	toElement: function() {
		return this.element;
	}

});

// canvas ink
// ripped from mooART.Ink and mooART.Paint
Canvas.implement({

	save: function() {
		this.context.save();
		return this;
	},

	restore: function() {
		this.context.restore();
		return this;
	},

	begin: function(p) {
		this.context.beginPath();
		this.context.moveTo(p.x, p.y);
		return this;
	},

	close: function() {
		this.context.closePath();
		return this;
	},

	translate: function(p) {
		this.context.translate(p.x, p.y);
		return this;
	},

	line: function(p) {
		this.context.lineTo(p.x, p.y);
		return this;
	},

	curve: function(p, c) {
		this.context.quadraticCurveTo(c.x, c.y, p.x, p.y);
		return this;
	},

	box: function(options) {
		var radius = options.radius, width = options.width, height = options.height;
		var fill = options.opacity == undefined ? options.fill : this.colorize(options.fill, options.opacity);
		
		var tl = $pick(options['top-left-radius'], radius),
			tr = $pick(options['top-right-radius'], radius),
			bl = $pick(options['bottom-left-radius'], radius),
			br = $pick(options['bottom-right-radius'], radius);

		return this
			.begin({ x: 0, y: height - tl })
			.line({ x: 0, y: tl }).curve({ x: tl, y: 0 }, { x: 0, y: 0 })
			.line({ x: width - tr, y: 0 }).curve({ x: width, y: tr }, { x: width, y: 0 })
			.line({ x: width, y: height - br }).curve({ x: width - br, y: height }, { x: width, y: height })
			.line({ x: bl, y: height }).curve({ x: 0, y: height - bl }, { x: 0, y: height })
			.close()
			.fill(fill, height);
	},

	arc: function(center, radius, start, end, fill) {
		this.context.arc(center.x, center.y, radius, Math.radians(start), Math.radians(end), false);
		return this.fill(fill, radius * 2);
	},

	block: function(options) {
		this.fill(options.fill, options.height);
		this.context.fillRect(0, 0, options.width, options.height);
		return this;
	},

	draw: function(instructions) {
		for (var method in instructions) this[method].run(instructions[method], this);
		return this;
	},

	fill: function(color, height) {
		if (typeof color != 'string') {
			var gradient = this.context.createLinearGradient(0, 0, 0, height);
			var len = color.length;
			color.each(function(color, i) {
				gradient.addColorStop(i / (len - 1), color);
			});
			color = gradient;
		}
		this.context.fillStyle = color;
		this.context.fill();
		return this;
	},

	rgba: function(rgb, a) {
		rgb = rgb.hexToRgb(true);
		return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + (a).round(5) + ')';
	},

	colorize: function(color, alpha) {
		switch ($type(color)) {
			case 'string': return this.rgba(color, alpha);
			case 'array': return color.map(function(c) {
				return this.rgba(c, alpha);
			}, this);
		}
		return '#000';
	}

});

Math.radians = function(degrees){
	return degrees * (Math.PI / 180);
};

// ripped from mooART
(function() {

	var defaultStyle = {
		radius: 5, width: 100, height: 100,
		title: 0, titleColor: '#ccc', titleOpacity: 1,
		status: 0, statusColor: '#ccc', statusOpacity: 1,
		overlay: true, overlayColor: '#fff', overlayOpacity: 1,
		drawShadow: true, shadow: 10, shadowOffsetX: 0, shadowOffsetY: -2, shadowColor: '#000', shadowOpacity: 0.5,
		border: 1, borderColor: '#000', borderOpacity: 0.4,
		reflection: 1, reflectionColors: ['#FFF', '#FFF'],
		line: 1, lineColors: ['#AAA', '#AAA']
	};
	
	function extendStyle(style) {
		style = $merge(defaultStyle, style);
		if (!style.shadow) style.shadowOffsetY = 0, style.shadowOffsetX = 0;
		style.innerHeight = style.height + style.status + style.title + (style.border * 2);
		style.innerWidth = style.width + (style.border * 2);
		style.outerHeight = (style.shadow * 2) - Math.abs(style.shadowOffsetY) + style.innerHeight;
		style.outerWidth = (style.shadow * 2) - Math.abs(style.shadowOffsetX) + style.innerWidth;
		var tl = style.topLeftRadius, tr = style.topRightRadius, bl = style.bottomLeftRadius, br = style.bottomRightRadius;
		style.topLeftRadius = $pick(tl, style.radius);
		style.topRightRadius = $pick(tr, style.radius);
		style.bottomLeftRadius = $pick(bl, style.radius);
		style.bottomRightRadius = $pick(br, style.radius);
		return style;
	};

	// draw Overlay theme, previous is cleared by setSize
	Canvas.implement({
		art: function(style) {
			style = extendStyle(style);
			this.setSize({ x: style.outerWidth, y: style.outerHeight });
			var tl = style.topLeftRadius, tr = style.topRightRadius, bl = style.bottomLeftRadius, br = style.bottomRightRadius;
			var shadow = style.shadow, border = style.border, radius = style.radius, height = style.height, width = style.width;
			var s2 = shadow * 1.5;
			var trs = tr + s2, tls = tl + s2, brs = br + s2, bls = bl + s2;
			//shadow

			if (style.drawShadow) (shadow).times(function(i) {
				var alpha = Fx.Transitions.Quad.easeIn(i / shadow) / shadow * style.shadowOpacity;
				this.box({
					'width': style.outerWidth - i * 2,
					'height': style.outerHeight - i * 2,
					'top-left-radius': tls - i,
					'top-right-radius': trs - i,
					'bottom-left-radius': bls - i,
					'bottom-right-radius': brs - i,
					'fill': this.colorize(style.shadowColor, alpha)
				});
				this.translate({ x: 1, y: 1 });
			}, this);
			else this.translate({ x: shadow, y: shadow });

			this.translate({ x: (style.shadowOffsetX > 0) ? 0 : style.shadowOffsetX, y: (style.shadowOffsetY > 0) ? 0 : style.shadowOffsetY });

			//border

			if (style.border) this.box({
				'width': style.innerWidth,
				'height': style.innerHeight,
				'top-left-radius': tl + border,
				'top-right-radius': tr + border,
				'bottom-left-radius': bl + border,
				'bottom-right-radius': br + border,
				'fill': this.colorize(style.borderColor, style.borderOpacity)
			}).translate({ x: border, y: border });

			//main overlay

			if (style.overlay) {

				if (!style.title && style.reflection) {
					this.box({
						'width': width,
						'height': height,
						'top-left-radius': tl,
						'top-right-radius': tr,
						'bottom-left-radius': bl,
						'bottom-right-radius': br,
						'fill': this.colorize(style.reflectionColors[0], style.overlayOpacity)
					}).translate({ x: 0, y: style.reflection });
				}

				var mh = (!style.title) ? style.reflection : 0;

				this.translate({ x: 0, y: style.title }).box({
					'width': width,
					'height': height - mh,
					'bottom-left-radius': style.status ? 0 : bl,
					'bottom-right-radius': style.status ? 0 : br,
					'top-left-radius': style.title ? 0 : tl,
					'top-right-radius': style.title ? 0 : tr,
					'fill': this.colorize(style.overlayColor, style.overlayOpacity)
				}).translate({ x: 0, y: -style.title });

			}

			if (style.title) {

				if (style.reflection) this.box({
					'width': width,
					'height': style.title,
					'top-left-radius': tl,
					'top-right-radius': tr,
					'bottom-left-radius': 0,
					'bottom-right-radius': 0,
					'fill': this.colorize(style.reflectionColors[0], style.titleOpacity)
				}).translate({ x: 0, y: style.reflection });

				this.box({
					'width': width,
					'height': style.title - style.reflection,
					'top-left-radius': tl,
					'top-right-radius': tr,
					'bottom-left-radius': 0,
					'bottom-right-radius': 0,
					'fill': this.colorize(style.titleColor, style.titleOpacity)
				}).translate({ x: 0, y: -style.reflection });

				if (style.line) this.translate({ x: 0, y: style.title - style.line }).box({
					'width': width,
					'height': style.line,
					'radius': 0,
					'fill': this.colorize(style.lineColors[0], style.titleOpacity)
				}).translate({ x: 0, y: -style.title + style.line });

			}

			if (style.status) {

				this.translate({ x: 0, y: height + style.title }).box({
					'width': width,
					'height': style.status,
					'bottom-left-radius': bl,
					'bottom-right-radius': br,
					'top-left-radius': 0,
					'top-right-radius': 0,
					'fill': this.colorize(style.statusColor, style.statusOpacity)
				});

				if (style.line) {

					this.box({
						'width': width, 'height': style.line, 'radius': 0, 'fill': this.colorize(style.lineColors[1], style.statusOpacity)
					});

					if (style.reflection) this.translate({ x: 0, y: style.line }).box({
						'width': width, 'height': style.reflection, 'radius': 0, 'fill': this.colorize(style.reflectionColors[1], style.statusOpacity)
					});

				}

			}
		}
	});

})();