Extending the JavaScript HTML5 Canvas object

I have been playing with JavaScript, trying to find new and interesting way to use it in browsers. I have found the wonder that is CANVAS, which allows you to do a whole lot of drawing and animation tasks.

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();
    };
}

References

• Rounded Rectangle extension from Websanova
• HTML5 canvas tutorials
• Bezier curve tool generator from Victoria Kurst
• SVG to HTML5 generator from Professor Cloud
• FabricJS