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 »


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 »


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 »

The globalAlpha property

The globalAlpha property controls the opacity (transparency) of whatever is drawn onto the canvas. So if you want your drawing to be partly see-through - you could set this to 0.5. Valid ranges are from 0 (fully transparent) to 1 (fully opaque). If you try to set the value to something outside his range it will retain its prior value.

If you want to implement a fade-in effect you could use this property - though if you want to fade-in the whole canvas a better idea would be to use the css opacity value - meaning that repeated redrawing is not necessary.

An example

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

        // Set the globalAlpha so that drawing on the canvas is semi-transparent
        context.globalAlpha = 0.3;
        var img = new Image();
        img.src = '/images/logo.png';
        img.onload = function ()
            context.drawImage(img, 16, 16);