The problem is that the features are low-level, meaning you need to write a lot of code to make anything useful or interesting. A nice technique is to use the prototyping feature of JavaScript to extend the features of canvas. Here are some examples:
if (window.CanvasRenderingContext2D) {
/**
* Rounded Rectangle
*/
CanvasRenderingContext2D.prototype.roundedRect = function(x, y, width, height, radius, colour, border, lineWidth, alpha) {
// if certain values are not set just exit
if(!x || !y || !width || !height) { return true; }
// Set other values
if (!radius) { radius = 5; }
if (!alpha) { alpha=1; }
// Start drawing the rounded rectangle
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
// Colour it in
if (colour) {
this.globalAlpha = alpha;
this.fillStyle = colour;
this.fill();
}
// Add in optional border
if (border) {
this.lineWidth = (lineWidth) ? linewidth : 1;
this.strokeStyle = border;
this.stroke();
}
// Reset Alpha if it was changed
this.globalAlpha = 1;
this.closePath();
};
/**
* Ellipse
*/
CanvasRenderingContext2D.prototype.ellipse = function(x, y, width, height, colour, border, lineWidth, alpha) {
// if certain values are not set just exit
if (!x || !y || !width || !height) { return true; }
if (!alpha) { alpha=1; }
// Calculate some points
var xLeft = x - (width / 2);
var xRight = x + (width / 2);
var yTop = y - (height / 2);
var yBot = y + (height / 2);
// Draw the ellipse
this.beginPath();
// NOTE: The moveTo() is needed to start the drawing from the correct spot
this.moveTo(x, yTop);
// Start drawing two bezier curves to create an ellipse
this.bezierCurveTo(xRight, yTop, xRight, yBot, x, yBot);
this.bezierCurveTo(xLeft, yBot, xLeft, yTop, x, yTop);
// Colour it in
if (colour) {
this.globalAlpha = alpha;
this.fillStyle = colour;
this.fill();
}
// Add in optional border
if (border) {
this.lineWidth = (lineWidth) ? linewidth : 1;
this.strokeStyle = border;
this.stroke();
}
// Reset Alpha if it was changed
this.globalAlpha = 1;
// Finish the drawing
this.closePath();
};
/**
* Rounded arcs and circles
*/
CanvasRenderingContext2D.prototype.circularArc = function(x, y, radius, startAng, endAng, colour, border, lineWidth, enclosed, direction, alpha) {
// if certain values are not set just exit
if (!x || !y || !radius) { return true; }
// Set other values
if (!alpha) { alpha=1; }
if (!startAng) { startAng = 0; }
if (!endAng) { endAng = Math.PI; }
if (!direction) { direction = false; }
// Start drawing
this.beginPath();
this.arc(x, y, radius, startAng, endAng, direction);
if (enclosed) {
this.closePath();
}
// Colour it in
if (colour) {
this.fillStyle = colour;
this.fill();
}
// Add in optional border
if (border) {
this.globalAlpha = alpha;
this.lineWidth = (lineWidth) ? lineWidth : 1;
this.strokeStyle = border;
this.stroke();
}
// Reset Alpha if it was changed
this.globalAlpha = 1;
// Finish the drawing
this.closePath();
};
}
Mock-up