Very simple canvas wrapper. This is intended to wrap a cairo canvas when running natively, or an HTML5 canvas when running in the browser. We export only the APIs we actually need (and don't require string parsing in the API) to make the native implementation easier.
This isn't Simplified JavaScript -- we use try/finally here.
BUGS FOUND: iOS -- the rect() primitive seems to improperly clear the area between 0,0 and the given x,y coordinate. I reimplemented in terms of the path primitives to work around. iOS - the text primitives don't seem to properly invalidate the rectangle the draw into. Therefore, unless there is some other drawing operation to expand the bounding box of the invalidation, the text will be clipped.
C. Scott Ananian, May 13 2011
define(function() {
var make = function(canvas_id) {
var canvasElem_ = canvas_id ?
document.getElementById(canvas_id) :
document.createElement("canvas");
var canvas_ = canvasElem_.getContext('2d');
var width_ = canvasElem_.width;
var height_ = canvasElem_.height;
var scale_ = 1;
return {
fontHeight: 10, // font is 10px when canvas is created.
fontBold: false,
fontItalic: false,resize the underlying canvas element. Also clears the drawing area. scale is 'devicePixelRatio' for devices like the iPhone retina display where we want to gain extra resolution w/o shrinking everything.
resize: function(width, height, scale) {
if (width === width_ && height === height_ &&
(scale||1) === scale_) {skip resize, which will save a clearRect on the client end (since spec says we must clear the canvas whenever one of the width/height fields is assigned)
return; /* nothing to do */
}
width_ = width;
height_ = height;
scale_ = scale || 1;
canvasElem_.width = width_ * scale_;
canvasElem_.height = height_ * scale_;
canvas_.setTransform(scale_, 0, 0, scale_, 0, 0);spec will clear as a side effect of the above. We're not going to do it explicitly, because that would just waste cycles.
if (false) { /* disabled for performance */
canvas_.clearRect(0,0,width_,height_);
}
},get the current canvas size
size: function() {
return { width: width_, height: height_, scale: scale_ };
},execute the given function, saving and restoring the canvas context around its invocation.
withContext: function(_this_, f) {
var h, b, i;
h = this.fontHeight;
b = this.fontBold;
i = this.fontItalic;
try {
canvas_.save();
return f.apply(_this_ || this);
} finally {
canvas_.restore();
this.fontHeight = h;
this.fontBold = b;
this.fontItalic = i;
}
},transforms
scale: function(x, y) {
if (typeof(x)==="object") { y=x.y; x=x.x; }
canvas_.scale(x, y);
},
translate: function(x, y) {
if (typeof(x)==="object") { y=x.y; x=x.x; }
canvas_.translate(x, y);
},
transform: function(a, b, c, d, e, f) {
canvas_.transform(a, b, c, d, e, f);
},drawing
clearRect: function(x, y, w, h) {fills rectangle with transparent black
canvas_.clearRect(x, y, w, h);
},
beginPath: function() {
canvas_.beginPath();
},
closePath: function() {
canvas_.closePath();
},
arc: function(xc, yc, radius, angle1, angle2, negative) {
canvas_.arc(xc, yc, radius, angle1, angle2, negative);
},
moveTo: function(x, y) {
if (typeof(x)==="object") { y=x.y; x=x.x; }
canvas_.moveTo(x, y);
},
lineTo: function(x, y) {
if (typeof(x)==="object") { y=x.y; x=x.x; }
canvas_.lineTo(x, y);
},
rect: function(x, y, w, h) {the rect primitive seems to have some issues on iOS (see above). We're going to implement it in terms of primitives.
this.moveTo(x,y);
this.lineTo(x+w, y);
this.lineTo(x+w, y+h);
this.lineTo(x, y+h);
this.closePath();
},
stroke: function() {simple line joins make it easier to compute stroke bounding boxes.
canvas_.miterLimit = 1;
canvas_.lineCap = "round";
canvas_.lineJoin = "round";
canvas_.stroke();
},
fill: function() {
canvas_.fill();
},
clip: function() {
canvas_.clip();
},
setStroke: function(color) {
canvas_.strokeStyle = color.toCSS();
},
setFill: function(color) {
canvas_.fillStyle = color.toCSS();
},
setStrokeWidth: function(width) {
canvas_.lineWidth = width;
},
setFontHeight: function(height) {height should be in current drawing units
this.fontHeight = height;
this._updateFont();
},
setFontItalic: function(isItalic) {
this.fontItalic = isItalic;
this._updateFont();
},
setFontBold: function(isBold) {
this.fontBold = isBold;
this._updateFont();
},
_updateFont: function() {
var fs = this.fontHeight+"px sans-serif";
if (this.fontItalic) fs = "italic "+fs;
if (this.fontBold) fs = "bold "+fs;
canvas_.font = fs;
},
drawText: function(text, x, y) {uses the fill color
if (typeof(x)==="object") { y=x.y; x=x.x; }
canvas_.fillText(text, x, y);
},
measureText: function(text) {
var metrics = canvas_.measureText(text);XXX html5 canvas doesn't give us proper font metrics, boo.
return { width: metrics.width,
height: this.fontHeight,
baseline: this.fontHeight * 0.8
};
},
};
};
return make;
});