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 use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

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

More »

The arc function

The arc function is used whilst drawing paths to the canvas to draw a circle or a partial circle to the canvas.

Arguments to the function

1 Angles are measured in radians - not degrees. 1 radian is equal to (180 / Math.PI) degrees.

An example

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

        context.beginPath();
    
        // This draws a whole circle to the canvas
        context.arc(125, 125, 100, 0, Math.PI * 2, false);
    
        context.stroke();
    }
</script>

How to draw a donut shape

View example on CodePen

At first, drawing a donut shape (a circle with a hole in the middle) isn't too taxing - just draw two circles, one smaller than the other which is coloured white. And you can indeed do this, but if you have anything at the back of the two filled circles then it won't show through.

There is a solution to this though and that's to draw the inner circle that has the smaller radius in an anti-clockwise direction. This way just the space between the two circles is filled.

In this example the canvas is first filled with a background colour and then the donut is drawn. As you can see, the background colour shows through the middle-hole after the donut is drawn.

<script>
    // Get the context
    context = document.getElementById('cvs2').getContext('2d');
    
    // Fill the whole canvas with a gray colour
    context.fillStyle = '#ddd';
    context.fillRect(0,0,300,300);
    
    // Start a new path
    context.beginPath();
    
    // Draw a circle with a radius of 100 in the
    // clockwise direction
    context.arc(150,150,100,0, 2 * Math.PI, false);
    
    // Now draw another circle with a smaller
    // radius and in the anti-clockwise direction
    context.arc(150,150,60,2 * Math.PI, 0, true);
    
    // Fill the resultant shape
    context.fillStyle = 'black';
    context.fill();
</script>