CODEWITHSUNDEEP
javascriptcanvas
Seph Reed
Seph Reed

Reputation: 10938

How to fully fade out contents in canvas

This question has been asked twice without the caveat of "Fully Fade Out"

Both of the accepted answers only partially fade out the contents. They both suggest something like:

// semi functional code, but doesn't fully work
ctx.save();
ctx.globalAlpha = 1;
ctx.globalCompositeOperation = "destination-in";
ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
ctx.restore();

This leaves residue everywhere, never fully fading out anything. See example below:

let canvas = document.getElementsByTagName('canvas')[0];
let ctx = canvas.getContext('2d');
let rand = n => Math.floor(Math.random() * n);
setInterval(() => {
  ctx.beginPath();
  ctx.arc(rand(300), rand(120), rand(60), Math.PI * 2, 0);
  ctx.fillStyle = `rgba(${rand(256)}, ${rand(256)}, ${rand(256)}, 1)`;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fill();
}, 1000);

let fadeOut = () => {
  let fadeAmount = 0.05;
  // Note that the colour here doesn't matter! Only the alpha matters.
  // The colour here is red, but you'll see no red appear
  ctx.fillStyle = `rgba(255, 0, 0, ${1 - fadeAmount})`;
  ctx.globalCompositeOperation = 'destination-in';
  ctx.fillRect(0, 0, 300, 120);
  requestAnimationFrame(fadeOut);
};
requestAnimationFrame(fadeOut);
canvas { border: 3px solid #808080; background-color: #000000; }
<canvas width="300" height="120"></canvas>

The question is: How can one fully fade out elements on a canvas, all the way to transparent?

EDIT: I'm searching for a performant solution that works for heavily layered (think visualizer) situations.

Upvotes: 0

Views: 190

Answers (1)

Helder Sepulveda
Helder Sepulveda

Reputation: 17594

Here is a small sample using globalAlpha, looks good to me, no residue...
each FadingCircle will have own fade, that will determine how fast it fades and if it goes to 0 or below we do not draw it, seems like an easy solution.
You can add colors, random positions and change it as much as you like to suit your needs.

const canvas = document.getElementsByTagName('canvas')[0];
const ctx = canvas.getContext('2d');

class FadingCircle {
  constructor(x, y, radius, fade) {
    this.x = x
    this.y = y
    this.radius = radius
    this.fade = fade
    this.globalAlpha = 1
  }
  draw(ctx) {
    if (this.globalAlpha > 0) {
      ctx.beginPath()
      ctx.globalAlpha = this.globalAlpha
      ctx.arc(this.x, this.y, this.radius, Math.PI * 2, 0)
      ctx.fill()
      this.globalAlpha -= this.fade
    }
  }
}

let sml = new FadingCircle(40, 50, 20, 0.01)
let med = new FadingCircle(140, 50, 30, 0)
let big = new FadingCircle(100, 50, 50, 0.005)

let animation = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  big.draw(ctx)
  med.draw(ctx)
  sml.draw(ctx)
  requestAnimationFrame(animation);
};
requestAnimationFrame(animation);
<canvas width="300" height="120"></canvas>

Upvotes: 1

Related Questions