.net Powerful JavaScript charts
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 »


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 hosted libraries.

More »


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 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);