Canvas reference: The arcTo() function

Summary: The arcTo() function is a path function used when drawing circles or partial circles. It can also be used to draw curved-corner rectangles quite conveniently.

The arcTo() function is used whilst drawing paths to the canvas to draw a circle or a partial circle to the canvas. The function draws the arc created by two lines that are defined by the coordinates and radius given. Commonly the arc() function can be used as an alternative to this function.

Arguments to the function

• The X1 coordinate
• The Y1 coordinate
• The X2 coordinate
• The X2 coordinate
• The radius

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        context.beginPath();
        context.moveTo(50,50);
        context.moveTo(100,50);
        context.arcTo(200,50,200,200,25);
        context.stroke();
    }
</script>

A rectangle with rounded corners

This is an example of using the arcTo() function in order to make a rectangle with rounded corners. Simply include the function before you create the canvas 2D context and it will be there for you to make use of. It's just like the rect() function but with an extra argument that stipulates the size of the rounded corners.

<script>
    /**
    * This adds a roundedRect(x, y, width, height, radius) function to the drawing
    * context. The radius argument dictates how severe the corners are rounded.
    * 
    * @param number x      The X coordinate
    * @param number y      The Y coordinate
    * @param number width  The width of the rectangle
    * @param number height The height of the rectangle
    * @param number radius The radius of the corners. Bigger values mean more rounded corners
    */
    CanvasRenderingContext2D.prototype.roundedRect = function (x, y, width, height, radius)
    {
        // Because the function is added to the context prototype
        // the 'this' variable is actually the context
        
        // Save the existing state of the canvas so that it can be restored later
        this.save();
        
            // Translate to the given X/Y coordinates
            this.translate(x, y);

            // Move to the center of the top horizontal line
            this.moveTo(width / 2,0);
            
            // Draw the rounded corners. The connecting lines in between them are drawn automatically
            this.arcTo(width,0,width,height, Math.min(height / 2, radius));
            this.arcTo(width, height, 0, height, Math.min(width / 2, radius));
            this.arcTo(0, height, 0, 0, Math.min(height / 2, radius));
            this.arcTo(0, 0, radius, 0, Math.min(width / 2, radius));

            // Draw a line back to the start coordinates
            this.lineTo(width / 2,0);

        // Restore the state of the canvas to as it was before the save
        this.restore();
    }



    window.onload = function ()
    {
        // And you use it like this. First get the canvas and context as normal
        var canvas  = document.getElementById('cvs')
        var context = canvas.getContext('2d')

        // Start a path and draw a rounded rectangle. The roundedRect() function can be likened to the rect() function
        context.beginPath();
        context.fillStyle = 'red';
        context.roundedRect(5, 5, 100, 200, 15);
        context.stroke();
        context.fill();
    }
</script>