BitmapTextures - Not displaying properly with globalCompositeOperation

[karimbeyrouti]

BitmapTexture not displaying correctly. See screenshot - issue is with colours - gradient is expected .

///
//

module misc{

export class ReflectionTest
{
    private view : away.containers.View3D;
    private raf  : away.utils.RequestAnimationFrame;
    private reflectionMesh : away.entities.Mesh;

    constructor()
    {
        this.view   = new away.containers.View3D();
        this.raf    = new away.utils.RequestAnimationFrame( this.render , this );

        away.library.AssetLibrary.enableParser( away.loaders.ImageParser );

        var token : away.loaders.AssetLoaderToken = away.library.AssetLibrary.load( new away.net.URLRequest('assets/dots.png'));
            token.addEventListener(away.events.LoaderEvent.RESOURCE_COMPLETE , this.onResourceComplete , this );

        window.onresize = () => this.resize();


    }

    private onResourceComplete( e : away.events.LoaderEvent) : void
    {
        //var loader : AssetLoader = e.target as AssetLoader;
        var loader : away.loaders.AssetLoader   = <away.loaders.AssetLoader> e.target;
        var l       : number                    = loader.baseDependency.assets.length;

        for ( var c : number = 0 ; c < l ; c ++ )
        {

            var asset : away.library.IAsset = loader.baseDependency.assets[c];

            switch (asset.assetType)
            {


                case away.library.AssetType.TEXTURE:

                    var geom    : away.primitives.PlaneGeometry = new away.primitives.PlaneGeometry(500  , 500 , 1 , 1 , false );
                    var tx      : away.textures.HTMLImageElementTexture = <away.textures.HTMLImageElementTexture> asset;
                    var bitmap  : away.display.BitmapData = new away.display.BitmapData(  1024, 1024 , true , 0x00000000 )

                    bitmap.context.translate(0, 1024);
                    bitmap.context.scale(1, -1);
                    bitmap.context.drawImage(tx.htmlImageElement, 0, 0, 1024, 1024);

                    var gradient = bitmap.context.createLinearGradient(0, 0, 0, 1024);
                        gradient.addColorStop(0.8, "rgba(255, 255, 255, 1.0)");
                        gradient.addColorStop(1, "rgba(255, 255, 255, 0.5)");

                    bitmap.context.fillStyle = gradient;
                    bitmap.context.rect(0, 0, 1024, 1024);
                    // ERROR CAUSED BY 'globalCompositeOperation' 
                    bitmap.context.globalCompositeOperation = "destination-out"; // causes texture to display incorrectly
                    bitmap.context.fill();

                    document.body.appendChild(bitmap.canvas );

                    var bmpTX : away.textures.BitmapTexture = new away.textures.BitmapTexture( bitmap , false  );

                    var material : away.materials.TextureMaterial = new away.materials.TextureMaterial( bmpTX );
                        material.bothSides = true;
                        //material.alphaBlending = true;


                    this.reflectionMesh= new away.entities.Mesh( geom , material );

                    this.view.scene.addChild(this.reflectionMesh);

                    break;



            }



        }

        this.raf.start();
        this.resize();

    }

    private resize()
    {
        this.view.width = window.innerWidth;
        this.view.height= window.innerHeight;
    }

    private render()
    {
        this.reflectionMesh.rotationY +=.5;

        this.view.render();
    }

}

}
window.onload = function ()
{

var test = new misc.ReflectionTest();

}