Code Monkey home page Code Monkey logo

Comments (8)

bebensiganteng avatar bebensiganteng commented on March 28, 2024

ow, its an easy fix

http://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent

tried that, works fine now..

from pixijs.

bebensiganteng avatar bebensiganteng commented on March 28, 2024

hmm, but the alpha is now out in chrome

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 28, 2024

so close! ya could try try removing the premultipliedAlpha from thw webGL creation context?

from pixijs.

romanenko avatar romanenko commented on March 28, 2024

I'm also having issues with transparent background with WebGL renderer. Background is transparent only in Opera, new Safari, Chrome and Firefox with WebGL leaves it green.

    <html>
    <head>
        <title>Playground</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                background-color: #000000;
            }
            #circle {
                display: none;
            }
        </style>
    </head>
    <body>
        <canvas id="circle" width="300" height="300"></canvas>
        <script src="../pixi.js/bin/pixi.js"></script>
        <script>

            var canvas = document.getElementById('circle');
            if (canvas.getContext) {
                // Preparing canvas cirlce
                var context = canvas.getContext('2d');

                context.beginPath();
                context.fillStyle = "rgb(255,0,0)";
                context.arc(canvas.width/2,canvas.height/2,150,0,Math.PI*2,false);
                context.fill();
                context.closePath();

                // create an new instance of a pixi stage
                var stage = new PIXI.Stage(0x66FF99);
                var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
                document.body.appendChild(renderer.view);

                var circleTexture = PIXI.Texture.fromCanvas(document.getElementById("circle"));
                var circle = new PIXI.Sprite(circleTexture);

                circle.position.x = 100;
                circle.position.y = 100;

                stage.addChild(circle);

                function animate() {  
                    renderer.render(stage);
                    requestAnimFrame( animate );
                }

                requestAnimFrame(animate);
            } else {
              alert("At least HTML5 Canvas support required");
            }

        </script>

        </body>
    </html>

from pixijs.

englercj avatar englercj commented on March 28, 2024

Looks like this is fixed in the dev branch by this commit: a479e27

from pixijs.

romanenko avatar romanenko commented on March 28, 2024

Looks like the bug still persists. I'm using the same code above and the latest pixi from master (1.2.0), but background of the stage isn't transparent in Safari and FF. In Chrome and Opera everything is fine.

from pixijs.

sfentress avatar sfentress commented on March 28, 2024

I can confirm that this bug still persists when using the WebGLRenderer. If you open http://jsfiddle.net/SamFent/yvh4k/ in FireFox, you will see that the background is opaque and covers the text behind the canvas.

edit fiddle - jsfiddle-1

The basic fix for this seems to be fairly simple: when we are requesting a transparent background, it seems we have to use gl.clearColor(0,0,0,0).

Making this simple change fixes the issue in FireFox:

edit fiddle - jsfiddle-2

However, this fix alone introduces a weird antialiasing issue in Chrome. In my example above with the nicely-rendered svg spheres with gradients, we suddenly get an ugly grey line around the spheres that seems to have been caused by the clipping of the edges:

edit fiddle - jsfiddle

The fix for this seems to be to set premultipliedAlpha to true (where it was before the fix above (a479e27) was applied). Setting premultipliedAlpha: true returns the svg images to being rendered without ugly clipping:

edit fiddle - jsfiddle-3

I have added a pull request for this fix here: #345

from pixijs.

lock avatar lock commented on March 28, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

from pixijs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.