RE: 1.2.1 canvas issue?

[Steve Onnis]

why are you using the Microsoft filter?  just call i.setOpacity(.2), or even
better..
 
i.setStyles( {opacity:0.2, width:"100%", height:"100%"})

  _____  

From: mootools-users@googlegroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of nwhite
Sent: Sunday, 2 November 2008 9:25 AM
To: mootools-users@googlegroups.com
Subject: 1.2.1 canvas issue?


I've been playing around with MooFlow (
http://www.outcut.de/MooFlow/MooFlow.html ).

The demo works great. I can port it over exactly and it works fine. If I use
1.2.1 build it works fine in Safari, IE but explodes in FF/Mac.

Here is the message I get.

uncaught exception: [Exception... "Component returned failure code:
0x80040111 (NS_ERROR_NOT_AVAILABLE)
[nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111
(NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
http://nathan.propertymaps.com/idx_mapplet/js/MooFlow.js?id=1225575733 ::
anonymous :: line 410" data: no]

It appears to be breaking here, anyone have any insight?

Element.implement({
    reflect: function(arg){
        i = arg.img.clone();
        if(Browser.Engine.trident){
            i.style.filter = 'flipv
progid:DXImageTransform.Microsoft.Alpha(opacity=20, style=1,
finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+100*arg.ref+')';
            i.setStyles({'width':'100%', 'height':'100%'});
            return new Element('div').adopt(i);
        } else {
            var can = new
Element('canvas').setProperties({'width':arg.width, 'height':arg.height});
            if(can.getContext){
                var ctx = can.getContext("2d");
                ctx.save();
                ctx.translate(0,arg.height-1);
                ctx.scale(1,-1);
                ctx.drawImage(i, 0, 0, arg.width, arg.height);
                ctx.restore();
                ctx.globalCompositeOperation = "destination-out";
                ctx.fillStyle = arg.color;
                ctx.fillRect(0, arg.height*0.5, arg.width, arg.height);
                var gra = ctx.createLinearGradient(0, 0, 0,
arg.height*arg.ref);                    
                gra.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                gra.addColorStop(0, "rgba(255, 255, 255, "+(1-arg.ref)+")");
                ctx.fillStyle = gra;
                ctx.rect(0, 0, arg.width, arg.height);
                ctx.fill();
                delete ctx, gra;
            }
            return can;
        }
    }
});