About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

The arcTo function

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

An example

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

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

A rectangle with rounded corners

View example on CodePen

This is an example of using the arcTo function 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>