Fade out effect for text in HTML5 canvas

Question

I'm drawing simple text in HTML5 canvas using this:

context.fillStyle = "#FF0000"
context.font = "italic 20pt Arial";
context.fillText("sfddsfs", 50, 50);

Now I want to animate fade out of this text. How can that be done?

Edit: I'm aware there's currently no ready to use way to do this (at least I can't find anything). I'm a noob in graphic programming but want to learn, so any hint about where to start is appreciated.

Maybe something like putting the text in an own canvas and changing globalAlpha of the canvas...? But the background of the canvas would have to be transparent. And don't know about performance, have a lot of small labels appearing and dissapearing everywhere which need to be faded out.

jQuery animate See here: http://stackoverflow.com/questions/5333156/using-jquery-animate-on-canvas-objects — Chris Morley, Mar 29 '12 at 20:39

score 16 · Accepted Answer · answered Mar 29 '12 at 20:56

16

It's easier if you use rgba() notation to set the fillStyle rather than the hexadecimal notation. Here's a working example (demo):

// Create a canvas element and append it to <body>
var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');
document.body.appendChild(canvas);


function fadeOut(text) {
    var alpha = 1.0,   // full opacity
        interval = setInterval(function () {
            canvas.width = canvas.width; // Clears the canvas
            context.fillStyle = "rgba(255, 0, 0, " + alpha + ")";
            context.font = "italic 20pt Arial";
            context.fillText(text, 50, 50);
            alpha = alpha - 0.05; // decrease opacity (fade out)
            if (alpha < 0) {
                canvas.width = canvas.width;
                clearInterval(interval);
            }
        }, 50); 
}

fadeOut('sfddsfs');

answered Mar 29 '12 at 20:56

Ori

4,132
1
25
27

great answer, but I'd try using an animation frame first and fallback to setInterval: http://www.w3.org/TR/animation-timing/ – Anony372 Mar 29 '12 at 21:41
You are clearing canvas each time for animation,But what if I have already some drawing on canvas? for ex. see this-> http://jsfiddle.net/dlinx/EhD7J/305/ – Laxmikant Dange May 14 '14 at 08:36
In your case you could use clearRect(...) to clear the area specific to the fading text each time, but in the likely event that there's some overlap you'll just have to redraw the other elements in the correct order. EDIT: http://www.w3schools.com/tags/canvas_clearrect.asp – GPMorgan Jun 20 '14 at 07:57

score 2 · Answer 2 · answered Mar 29 '12 at 20:53

I think I got it. Forgot to mention that I have already a render loop and text objects which draw themselves on the canvas each frame.

So the solution is to add alpha variable to the text objects:

this.alpha = 1;

and each x frames or time reduce this a bit.

and in the render loop:

context.globalAlpha = textObject.alpha;
//draw the text
context.globalAlpha = 1;

score 0 · Answer 3 · answered Mar 29 '12 at 20:40

There is no built-in solution to this. You have to do the animation(fade) by drawing each frame individually:

Set up some timing function that calculates the gradient between #FF0000 and the background color and redraws the text over and over until the background color is reached.

Fade out effect for text in HTML5 canvas

3 Answers3