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.
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.
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.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
<script>
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);
}
}
</script>