Circular mask on html5 target

I build circular mask on .swf demo and it works great. But I have problem on html5 and Android target.
You can see results on video mask (left is flash, right is html5 webGl target). It works correctly with -Dcanvas target but I would like to run it on webGl. Is there solution?

Are you tweening the mask? If you are using the the new-tween, then try using the classic tween. In some cases I converted the tween to frame by frame animation, to make it work on html5.

No I don’t use tween. I use EnterFrame event, set mask and use


to dynamically draw circle.

I believe it’s supported in HTML5 -Dcanvas or native -Dcairo, but in OpenGL we need a shader-based masking solution. We’ve made progress so far (with the addition of cacheAsBitmap support in the renderer) and hope to support this in the future

I’ll definitely need OpenGL for this feature because on Android it acts same as on WebGL target.

Here’s a shader-based mask for bitmaps that may be helpful:

    public static function maskBitmap(bitmap:Bitmap, mask:DisplayObject):Void {
        #if flash

        bitmap.mask = mask;

        var shader = new Shader ();
        shader.glFragmentSource =
            "varying float vAlpha;
            varying vec2 vTexCoord;
            uniform sampler2D uImage0;
            uniform sampler2D uImage1;

            void main(void) {

                vec4 color = texture2D (uImage0, vTexCoord);
                float mask = texture2D (uImage1, vTexCoord).a;

                if (color.a == 0.0 || mask == 0.0) {

                    gl_FragColor = vec4 (0.0, 0.0, 0.0, 0.0);

                } else {

                    gl_FragColor = vec4 (color.rgb / color.a, mask * color.a * vAlpha);



        var alphaBitmapData = new BitmapData(bitmap.bitmapData.width, bitmap.bitmapData.height, true, 0);
        alphaBitmapData.draw(mask, bitmap.transform.matrix.invert()); = alphaBitmapData;
        bitmap.filters = [ new ShaderFilter (shader) ];


This might also work with bitmap.shader = shader; in OpenFL 6

Here’s some changes that may also work, but it’s a work-in-progress

So I created this circular mask using Shader as @craigr suggested. Mask is OK but it’s little bit slow and doesn’t “circle” smoothly as you can see: Any advices?