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 »


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 »


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

More »

The clearRect function

The clearRect function can be used to return a section of the canvas to transparency again - removing any drawing that might be there. It can be used to clear the canvas (assuming the dimensions are correct) without affecting the transformation matrix (ie any translate/scale/rotate/transform that you have done).

RGraph uses two functions to differentiate between using this function to clear the canvas and the way involving setting the width to itself - a clear function and a reset function. The reset function uses the width = width method of clearing the canvas (which also removes any anti-aliasing translation that has been done).

Arguments to the function

An example

    window.onload = function ()
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');
        var width   = canvas.width;
        var height  = canvas.height;

        // Clears the whole canvas
        context.clearRect(0, 0, width, height);