/*!
* Canvas
* Copyright (c) 2010 LearnBoost <tj@learnboost.com>
* MIT Licensed
*/
/**
* Module dependencies.
*/
var canvas = require('../build/default/canvas')
, colors = require('./colors')
, Canvas = canvas.Canvas
, Context2d = canvas.CanvasRenderingContext2d
, CanvasGradient = canvas.CanvasGradient
, cairoVersion = canvas.cairoVersion
, PNGStream = require('./pngstream')
, fs = require('fs');
/**
* Export `Canvas` as the module.
*/
var Canvas = exports = module.exports = Canvas;
/**
* Library version.
*/
exports.version = '0.0.1';
/**
* Cairo version.
*/
exports.cairoVersion = cairoVersion;
/**
* Cache color string RGBA values.
*/
var cache = {};
/**
* Text baselines.
*/
var baselines = ['alphabetic', 'top', 'bottom', 'middle', 'ideographic', 'hanging'];
/**
* Font RegExp helpers.
*/
var weights = 'normal|bold|bolder|lighter|[1-9](?:00)'
, styles = 'normal|italic|oblique'
, units = 'px|pt|pc|in|cm|mm|%'
, string = '"([^"]+)"|[\\w-]+';
/**
* Font parser RegExp;
*/
var fontre = new RegExp('^ *'
+ '(?:(' + weights + ') *)?'
+ '(?:(' + styles + ') *)?'
+ '(\\d+)(' + units + ') *'
+ '((?:' + string + ')( *, *(?:' + string + '))*)'
);
/**
* Buffer extensions.
*/
require('./buffer');
/**
* Return a function used to normalize an RGBA color `prop`.
*
* @param {String} prop
* @return {Function}
* @api public
*/
function normalizedColor(prop) {
return function(){
var rgba = this[prop];
if (1 == rgba[3]) {
return '#'
+ rgba[0].toString(16)
+ rgba[1].toString(16)
+ rgba[2].toString(16);
} else {
return 'rgba('
+ rgba[0] + ', '
+ rgba[1] + ', '
+ rgba[2] + ', '
+ rgba[3] + ')';
}
}
}
/**
* Parse font `str`.
*
* @param {String} str
* @return {Object}
* @api public
*/
var parseFont = exports.parseFont = function(str){
var font = {}
, captures = fontre.exec(str);
// Invalid
if (!captures) return;
// Populate font object
font.weight = captures[1] || 'normal';
font.style = captures[2] || 'normal';
font.size = parseInt(captures[3], 10);
font.unit = captures[4];
font.family = captures[5];
return font;
};
/**
* Parse the given color `str`.
*
* Current supports:
*
* - #nnn
* - #nnnnnn
* - rgb(r,g,b)
* - rgba(r,g,b,a)
* - color
*
* Examples
*
* - #fff
* - #FFF
* - #FFFFFF
* - rgb(255,255,5)
* - rgba(255,255,5,.8)
* - rgba(255,255,5,0.8)
* - white
* - red
*
* @param {String} str
* @return {Array}
* @api public
*/
var parseColor = exports.parseColor = function(str){
if (cache[str]) return cache[str];
str = colors[str] || String(str);
// RGBA
if (0 == str.indexOf('rgba')) {
var captures = /rgba\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *, *(\d+\.\d+|\.\d+|\d+) *\)/.exec(str);
if (!captures) return;
return cache[str] = [
parseInt(captures[1], 10)
, parseInt(captures[2], 10)
, parseInt(captures[3], 10)
, parseFloat(captures[4], 10)
];
// RGB
} else if (0 == str.indexOf('rgb')) {
var captures = /rgb\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *\)/.exec(str);
if (!captures) return;
return cache[str] = [
parseInt(captures[1], 10)
, parseInt(captures[2], 10)
, parseInt(captures[3], 10)
, 1
];
// #RRGGBB
} else if ('#' == str[0] && str.length > 4) {
var captures = /#([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})/.exec(str);
if (!captures) return;
return cache[str] = [
parseInt(captures[1], 16)
, parseInt(captures[2], 16)
, parseInt(captures[3], 16)
, 1
];
// #RGB
} else if ('#' == str[0]) {
var captures = /#([a-fA-F\d])([a-fA-F\d])([a-fA-F\d])/.exec(str);
if (!captures) return;
return cache[str] = [
parseInt(captures[1] + captures[1], 16)
, parseInt(captures[2] + captures[2], 16)
, parseInt(captures[3] + captures[3], 16)
, 1
];
}
};
/**
* Inspect canvas.
*
* @return {String}
* @api public
*/
Canvas.prototype.inspect = function(){
return '[Canvas ' + this.width + ' ' + this.height + ']';
};
/**
* Get a context object.
*
* @param {String} contextId
* @return {Context2d}
* @api public
*/
Canvas.prototype.getContext = function(contextId){
if ('2d' == contextId) {
var ctx = new Context2d(this);
this.context = ctx;
ctx.canvas = this;
return ctx;
}
};
/**
* Create a `PNGStream` for `this` canvas.
*
* @return {PNGStream}
* @api public
*/
Canvas.prototype.createPNGStream = function(){
return new PNGStream(this);
};
/**
* Create a synchronous `PNGStream` for `this` canvas.
*
* @return {PNGStream}
* @api public
*/
Canvas.prototype.createSyncPNGStream = function(){
return new PNGStream(this, true);
};
/**
* Return a `Buffer` instance consisting of the PNG image data.
*
* @return {Buffer}
* @api public
*/
Canvas.prototype.toBuffer = function(){
var buf;
this.streamPNGSync(function(err, chunk, len){
if (err) throw err;
if (len) {
buf = buf
? buf.concat(chunk)
: chunk;
}
});
return buf;
};
/**
* Return a data url.
*
* @param {String} type
* @return {String}
* @api public
*/
Canvas.prototype.toDataURL = function(type){
// TODO: jpeg / svg / pdf :)
type = type || 'image/png';
if ('image/png' != type) throw new Error('currently only image/png is supported');
return 'data:' + type
+ ';base64,' + this.toBuffer().toString('base64');
};
/**
* Add `color` stop at the given `offset`.
*
* @param {Number} offset
* @param {String} color
* @api public
*/
CanvasGradient.prototype.addColorStop = function(offset, color){
var rgba;
if (rgba = parseColor(color)) {
this.addColorStopRGBA(
offset
, rgba[0]
, rgba[1]
, rgba[2]
, rgba[3]);
}
};
/**
* Create a linear gradient at the given point `(x0, y0)` and `(x1, y1)`.
*
* @param {Number} x0
* @param {Number} y0
* @param {Number} x1
* @param {Number} y1
* @return {CanvasGradient}
* @api public
*/
Context2d.prototype.createLinearGradient = function(x0, y0, x1, y1){
return new CanvasGradient(x0, y0, x1, y1);
};
/**
* Create a radial gradient at the given point `(x0, y0)` and `(x1, y1)`
* and radius `r0` and `r1`.
*
* @param {Number} x0
* @param {Number} y0
* @param {Number} r0
* @param {Number} x1
* @param {Number} y1
* @param {Number} r1
* @return {CanvasGradient}
* @api public
*/
Context2d.prototype.createRadialGradient = function(x0, y0, r0, x1, y1, r1){
return new CanvasGradient(x0, y0, r0, x1, y1, r1);
};
/**
* Reset transform matrix to identity, then apply the given args.
*
* @param {...}
* @api public
*/
Context2d.prototype.setTransform = function(){
this.resetTransform();
this.transform.apply(this, arguments);
};
/**
* Set the fill style with the given css color string.
*
* @see exports.parseColor()
* @api public
*/
Context2d.prototype.__defineSetter__('fillStyle', function(val){
if (val instanceof CanvasGradient) {
this.setFillPattern(val);
} else if ('string' == typeof val) {
var rgba;
if (rgba = parseColor(val)) {
this.lastFillStyle = rgba;
this.setFillRGBA(
rgba[0]
, rgba[1]
, rgba[2]
, rgba[3]);
}
}
});
/**
* Get the current fill style string.
*
* @api public
*/
Context2d.prototype.__defineGetter__('fillStyle', normalizedColor('lastFillStyle'));
/**
* Set the stroke style with the given css color string.
*
* @see exports.parseColor()
* @api public
*/
Context2d.prototype.__defineSetter__('strokeStyle', function(val){
if (val instanceof CanvasGradient) {
this.setStrokePattern(val);
} else if ('string' == typeof val) {
var rgba;
if (rgba = parseColor(val)) {
this.lastStrokeStyle = rgba;
this.setStrokeRGBA(
rgba[0]
, rgba[1]
, rgba[2]
, rgba[3]);
}
}
});
/**
* Get the current stroke style string.
*
* @api public
*/
Context2d.prototype.__defineGetter__('strokeStyle', normalizedColor('lastStrokeStyle'));
/**
* Set the shadow color with the given css color string.
*
* @see exports.parseColor()
* @api public
*/
Context2d.prototype.__defineSetter__('shadowColor', function(val){
if ('string' == typeof val) {
var rgba;
if (rgba = parseColor(val)) {
this.lastShadowColor = rgba;
this.setShadowRGBA(
rgba[0]
, rgba[1]
, rgba[2]
, rgba[3]);
}
}
});
/**
* Get the current shadow color string.
*
* @api public
*/
Context2d.prototype.__defineGetter__('shadowColor', normalizedColor('lastShadowColor'));
/**
* Set font.
*
* @see exports.parseFont()
* @api public
*/
Context2d.prototype.__defineSetter__('font', function(val){
if ('string' == typeof val) {
var font;
if (font = cache[val] || parseFont(val)) {
this.lastFontString = val;
// TODO: dpi
// TODO: remaining unit conversion
switch (font.unit) {
case 'pt':
font.size /= .75;
break;
case 'in':
font.size *= 96;
break;
case 'mm':
font.size *= 96.0 / 25.4;
break;
case 'cm':
font.size *= 96.0 / 2.54;
break;
}
// Cache font object
cache[val] = font;
// Set font
this.setFont(
font.weight
, font.style
, font.size
, font.unit
, font.family);
}
}
});
/**
* Get the current font.
*
* @api public
*/
Context2d.prototype.__defineGetter__('font', function(){
return this.lastFontString || '10px sans-serif';
});
/**
* Set text baseline.
*
* @api public
*/
Context2d.prototype.__defineSetter__('textBaseline', function(val){
var n = baselines.indexOf(val);
if (~n) {
this.lastBaseline = val;
this.setTextBaseline(n);
}
});
/**
* Get the current baseline setting.
*
* @api public
*/
Context2d.prototype.__defineGetter__('textAlign', function(){
return this.lastBaseline || 'alphabetic';
});
/**
* Set text alignment.
*
* @api public
*/
Context2d.prototype.__defineSetter__('textAlign', function(val){
switch (val) {
case 'center':
this.setTextAlignment(0);
this.lastTextAlignment = val;
break;
case 'left':
case 'start':
this.setTextAlignment(-1);
this.lastTextAlignment = val;
break;
case 'right':
case 'end':
this.setTextAlignment(1);
this.lastTextAlignment = val;
break;
}
});
/**
* Get the current font.
*
* @see exports.parseFont()
* @api public
*/
Context2d.prototype.__defineGetter__('textAlign', function(){
return this.lastTextAlignment || 'start';
});