The canvas element – Basic usage

The HTML5 Canvas element has its contents rendered with JavaScript. The canvas element makes use of the "context" into which you can issue JavaScript commands to draw anything you want. The canvas is initially blank, and to display something a script first needs to access the rendering context and draw on it. You can obtain the rendering context and it's drawing function by using the getContext method.

var canvas = $('#basic-canvas')[0];

if (canvas.getContext) {

    var context = canvas.getContext('2d');   

}

Once the context is obtained you can use the beginPath function to a new path, and lineTo, arcTo, arc and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

context.beginPath();

context.moveTo(this.xpos + this.cornerRadius, this.ypos);

context.lineTo(this.xpos + this.width - this.cornerRadius, this.ypos);

context.quadraticCurveTo(this.xpos + this.width, this.ypos, this.xpos + this.width,

//more code here

if (this.isFill) {

    if (this.isGradient) {

        if (this.gradientLayout == 'Horizontal') {

            context.fillStyle = this.getHorizontalGradient(context);

        }

        else {

            context.fillStyle = this.getLinearGradient(context);

        }

    }

    else {

        context.fillStyle = this.color;

    }

    context.fill();

} else {

    context.strokeStyle = this.color;

    context.stroke();

}

context.closePath();

Here’s a simple example that draws two intersecting rounded corner rectangles. I have uploaded the js class content created for the sample below.

function canvasRectangle() {

    var options = {};

    if (arguments[0]) options = arguments[0];

    var default_values = {

        'xpos': 20,

        'ypos': 20,

        'width': 100,

        'height': 50,

        'color': '#000000',

        'isFill': false,

        'lineWidth': 1,

        'cornerRadius': 0,

        'isGradient': false,

        'stopColor': '#E1D6D3',

        'stopColor2': '#C7C7C7',

        'gradientLayout' : "Horizontal"

    };

    for (var index in default_values) {

        if (typeof options[index] == 'undefined') options[index] = default_values[index];

    }

    this.cornerRadius = options['cornerRadius'];

    this.xpos = options['xpos'];

    this.ypos = options['ypos'];

    this.width = options['width'];

    this.height = options['height'];

    this.color = options['color'];

    this.isFill = options['isFill'];

    this.isGradient = options['isGradient'];

    this.stopColor = options['stopColor'];

    this.stopColor2 = options['stopColor2'];

    this.usedDefaultStop = this.stopColor == '#E1D6D3';

    this.gradientLayout = options['gradientLayout'];

    this.lineWidth = options['lineWidth'];

    this.setParent = function (parent) {

        this.xpos = this.xpos + $(parent).position().left;

        this.ypos = this.ypos + $(parent).position().top;

    };

    if (this.cornerRadius == 0) {

        this.draw = function (context) {

            context.beginPath();

            context.moveTo(this.xpos, this.ypos);

            context.lineTo(this.xpos + this.width, this.ypos);

            context.lineTo(this.xpos + this.width, this.ypos + this.height);

            context.lineTo(this.xpos, this.ypos + this.height);

            context.lineTo(this.xpos, this.ypos);

            context.lineWidth = this.lineWidth;

            if (this.isFill) {

                if (this.isGradient) {

                    if (this.gradientLayout == 'Horizontal') {

                        context.fillStyle = this.getHorizontalGradient(context);

                    }

                    else {

                        context.fillStyle = this.getLinearGradient(context);

                    }

                }

                else {

                    context.fillStyle = this.color;

                }

                context.fill();

            } else {

                context.strokeStyle = this.color;

                context.stroke();

            }

            context.closePath();

        };

    } else {

        this.draw = function (context) {

        context.beginPath();

        context.moveTo(this.xpos + this.cornerRadius, this.ypos);

        context.lineTo(this.xpos + this.width - this.cornerRadius, this.ypos);

        context.quadraticCurveTo(this.xpos + this.width, this.ypos, this.xpos + this.width, this.ypos + this.cornerRadius);

        context.lineTo(this.xpos + this.width, this.ypos + this.height);

        context.quadraticCurveTo(this.xpos + this.width, this.ypos + this.height + this.cornerRadius, this.xpos + this.width - this.cornerRadius, this.ypos + this.height + this.cornerRadius);

        context.lineTo(this.xpos + this.cornerRadius, this.ypos + this.height + this.cornerRadius);

        context.quadraticCurveTo(this.xpos, this.ypos + this.height + this.cornerRadius, this.xpos, this.ypos + this.height);

        context.lineTo(this.xpos, this.ypos + this.cornerRadius);

        context.quadraticCurveTo(this.xpos, this.ypos, this.xpos + this.cornerRadius, this.ypos);

        context.lineWidth = this.lineWidth;

        if (this.isFill) {

            if (this.isGradient) {

                if (this.gradientLayout == 'Horizontal') {

                    context.fillStyle = this.getHorizontalGradient(context);

                }

                else {

                    context.fillStyle = this.getLinearGradient(context);

                }

            }else {

                context.fillStyle = this.color;

            }

            context.fill();

        } else {

            context.strokeStyle = this.color;

            context.stroke();

        }

        context.closePath();

        };

    }

    this.getLinearGradient = function (context) {

        var gradient = context.createLinearGradient(this.xpos, this.ypos, this.xpos, this.ypos + this.height);

        gradient.addColorStop(0, this.color);

        gradient.addColorStop(0.5, this.stopColor);

        gradient.addColorStop(1, this.color);

        return gradient;

    };

    this.getHorizontalGradient = function (context) {

        var gradient = context.createLinearGradient(this.xpos, this.ypos, this.xpos + this.width, this.ypos);

        gradient.addColorStop(0, this.color);

        if (this.usedDefaultStop) {

            gradient.addColorStop(0.2, this.color);

            gradient.addColorStop(0.3, '#EBDDDD');

            gradient.addColorStop(0.4, this.color);

        }

        else {

            gradient.addColorStop(0.1, this.stopColor);

            gradient.addColorStop(0.2, this.stopColor2);

            gradient.addColorStop(0.3, this.stopColor);

        }

        gradient.addColorStop(1, this.color);

        return gradient;

    };

    this.getRadialGradient = function (context) {

        var gradient = context.createRadialGradient(this.xpos, this.ypos, 5, this.xpos, this.ypos + this.height, 50);

        gradient.addColorStop(0, this.color);

        gradient.addColorStop(1, this.stopColor);

        return gradient;

    };

}

Usage:

var sampleCanvas = $('#sampleCanvas')[0];

if (sampleCanvas.getContext) {

    var context = sampleCanvas.getContext('2d');

    var rectangleGreen = new canvasRectangle({ 'xpos': 40, 'ypos': 40, 'width': 100, 'height': 40, 'lineWidth': 2, 'color': '#2AFF7F', 'isFill': true, 'cornerRadius': 20, 'isGradient': true, 'stopColor': '#7FFFAA', 'stopColor2': '#7FFFAA' });

    rectangleGreen.draw(context);

    var rectangleRed = new canvasRectangle({ 'xpos': 80, 'ypos': 60, 'width': 100, 'height': 40, 'lineWidth': 2, 'color': '#FFAA2A', 'isFill': true, 'cornerRadius': 20, 'isGradient': true, 'stopColor': '#FFD47F', 'stopColor2': '#FFD47F' });

    rectangleRed.draw(context);

}