@@ -138,7 +138,7 @@ function renderForm(redo, ctx, form) {
138138 if (x !== 0 || y !== 0) ctx.translate(x, y);
139139 if (theta !== 0) ctx.rotate(theta);
140140 if (scale !== 1) ctx.scale(scale,scale);
141− if (form.alpha !== 1) ctx.globalAlpha = form.alpha;
141+ if (form.alpha !== 1) ctx.globalAlpha = ctx.globalAlpha * form.alpha;
142142 ctx.beginPath();
143143 var f = form.form;
144144 switch(f.ctor) {
@@ -199,6 +199,7 @@ function stepperHelp(list) {
199199function stepper(forms) {
200200 var ps = [stepperHelp(forms)];
201201 var matrices = [];
202+ var alphas = [];
202203 function peekNext() {
203204 var len = ps.length;
204205 var formType = '';
@@ -209,7 +210,12 @@ function stepper(forms) {
209210 }
210211 // assumes that there is a next element
211212 function next(ctx) {
212− while (!ps[0].peekNext()) { ps.shift(); matrices.pop(); if (ctx) { ctx.restore(); } }
213+ while (!ps[0].peekNext()) {
214+ ps.shift();
215+ matrices.pop();
216+ alphas.shift();
217+ if (ctx) { ctx.restore(); }
218+ }
213219 var out = ps[0].next();
214220 var f = out.form;
215221 if (f.ctor === 'FGroup') {
@@ -218,11 +224,16 @@ function stepper(forms) {
218224 ctx.save();
219225 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
220226 matrices.push(m);
227+
228+ var alpha = (alphas[0] || 1) * out.alpha;
229+ alphas.unshift(alpha);
230+ ctx.globalAlpha = alpha;
221231 }
222232 return out;
223233 }
224234 function transforms() { return matrices; }
225− return { peekNext:peekNext, next:next, transforms:transforms };
235+ function alpha() { return alphas[0] || 1; }
236+ return { peekNext:peekNext, next:next, transforms:transforms, alpha:alpha };
226237}
227238
228239function makeCanvas(w,h) {
@@ -275,7 +286,7 @@ function updateTracker(w,h,div) {
275286 ++i;
276287 return transform(transforms, canvas.getContext('2d'));
277288 }
278− function element(matrices, form) {
289+ function element(matrices, alpha, form) {
279290 var container = kids[i];
280291 if (!container || container.getContext) {
281292 container = newElement('div');
@@ -292,7 +303,7 @@ function updateTracker(w,h,div) {
292303
293304 container.style.width = w + 'px';
294305 container.style.height = h + 'px';
295− if (form.alpha !== 1) container.style.opacity = form.alpha;
306+ container.style.opacity = alpha * form.alpha;
296307
297308 var elem = form.form._0;
298309 var node = container.firstChild;
@@ -333,10 +344,11 @@ function update(div, _, model) {
333344 while (formType = stpr.peekNext()) {
334345 if (ctx === null && formType !== 'FElement') {
335346 ctx = tracker.getContext(stpr.transforms());
347+ ctx.globalAlpha = stpr.alpha();
336348 }
337349 var form = stpr.next(ctx);
338350 if (formType === 'FElement') {
339− tracker.element(stpr.transforms(), form);
351+ tracker.element(stpr.transforms(), stpr.alpha(), form);
340352 ctx = null;
341353 } else if (formType !== 'FGroup') {
342354 renderForm(function() { update(div, model, model); }, ctx, form);