html - Set alpha/transparency of whole canvas in Raphael html5

Question

Using Raphael to draw SVG in html5, is it possible to set the alpha opacity of the whole canvas?

Thanks

Answer 1

You can change the opacity of a Raphael element like this:

  raphaelElement.attr(opacity,.75);

If you're going to draw your svg on a canvas, just set context.globalAlpha and all drawing after that will be at the specified opacity:

  context.globalAlpha = 0.75;

Answer 2

There are a couple of things you can do. You can define a global Paper.set, add each element to the set, and apply the opacity attribute to the set, or use Paper.forEach() to apply the opacity to each element at once.

---

Using a Set

Create something like:

globalSet = paper.set();

Then as you create an element, add it to the set:

el = paper.circle(60, 60, 50);
el2 = paper.circle(90, 60, 50);

globalSet.push(el, el2);
globalSet.attr({opacity: .75});

Here's a jsFiddle: http://jsfiddle.net/TA9vn/2/

---

Using forEach()

Instead of using a set, use the forEach() method for paper.

paper.forEach(function (element) {
    element.attr({opacity: .75});
});

jsFiddle: http://jsfiddle.net/JCvBT/2/