CODEWITHSUNDEEP
htmlhtml5-canvas
Mia
Mia

Reputation: 6531

Canvas - Fade out case

I'm using canvas to generate random colored objects with an interval. What I want to do is, to fade the objects into whiteness just like they're fading into fog.

I want to achieve this without needing to redraw every object in every frame. Instead, I'm putting white layers between objects (with small opacity) so that it gives the efect of fade out.

Here is my current approach: http://jsfiddle.net/zettam/pUVkA/26/

var cvas = document.getElementById("ctxt");
var cx = cvas.getContext("2d");

function randomColor(num) {
    return Math.floor(Math.random() * num);
}

setInterval(function() {
    var r = randomColor(255);
    var g = randomColor(255);
    var b = randomColor(255);
    cx.fillStyle = "rgba(" + r + "," + g + "," + b + ",1.0)";
    cx.fillRect(200*Math.random(), 200*Math.random(), 300*Math.random(), 300*Math.random());
}, 200);

setInterval(function() {
    cx.fillStyle = "rgba(255,255,255,0.025)"
    cx.fillRect(0, 0, 500, 500);
}, 20);​

Asyou can see, the objects never fade out to fully white, but instead, they stay at somewhere gray.

How can I achieve what I need without having to re-draw everything every frame ?

Thanks.

Upvotes: 1

Views: 3073

Answers (2)

Shmiddty
Shmiddty

Reputation: 13967

Try this: http://jsfiddle.net/pUVkA/31/

It's a compromise between the two methods. As @Josh mentioned, the canvas compositing code has a problem with completely overlaying with an opacity less than 0.1. 

var cvas = document.getElementById("ctxt"),
    cx = cvas.getContext("2d"),
    lFade = new Date(),
    lBox = new Date(),
    lClear = new Date();

function randomColor(num) {
    return Math.floor(Math.random() * num);
}

(function draw(){
    var now = new Date();

    if (now - lFade > 20){
        cx.fillStyle = "rgba(255,255,255,0.025)"
        cx.fillRect(0, 0, 500, 500);
        lFade = now;
    }
    if (now - lClear > 800){
        cx.fillStyle = "rgba(255,255,255,0.1)"
        cx.fillRect(0, 0, 500, 500);
        lClear = now;
    }

    if (now - lBox > 200){
        var r = randomColor(255);
        var g = randomColor(255);
        var b = randomColor(255);
        cx.fillStyle = "rgba(" + r + "," + g + "," + b + ",1.0)";
        cx.fillRect(200*Math.random(), 200*Math.random(), 300*Math.random(), 300*Math.random());
        lBox = now;
    }

    setTimeout(draw, 1000/60);
})();

Upvotes: 1

Josh
Josh

Reputation: 276

The opacity setting in cx.fillStyle = "rgba(255,255,255,0.025)" is not working when less than 0.1. (some calculation problem with that function?)

Try setting it to 0.1 instead of 0.025 and change the Interval to something higher to compensate like 50 ?

Upvotes: 1

Related Questions