Home/ Questions/Q 7745437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T10:01:08+00:00

I’m drawing simple text in HTML5 canvas using this: context.fillStyle = #FF0000 context.font =

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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');
​
    • 0