How to change the opacity (alpha, transparency) of an element in a canvas element?

javascript

canvas

animation

transparency

byNikita Barsukov·Feb 15, 2025

Want to control transparency on a canvas fast? Use either globalAlpha or rgba. Here's how to get a 50% transparent element:

const ctx = document.getElementById('myCanvas').getContext('2d');

ctx.globalAlpha = 0.5;  
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 100, 100);  

// Acha, but we also got the RGBA way
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fillRect(150, 20, 100, 100);

With globalAlpha, the transparency setting sticks around and affects all successive elements. rgba, however, will individualize the process.

Smooth and Dynamic Opacity

Sure, globalAlpha changes the opacity, but what if you could magically vary that over time?

Fade in like a pro

Let's animate that opacity change. Using loops and/or JavaScript's setTimeout, you can create a smooth fade-in effect.

// Pretend you're Harry Potter and this's your spell
const fadeIn = (ctx, img, maxOpacity, step) => {
  let alpha = 0;
  ctx.save();  // Preserve the current state. Hermione will be proud!
  
  const draw = () => {
    if (alpha < maxOpacity) {
      // Clean up your canvas. Always, always clean your wand post-spell
      ctx.clearRect(0, 0, 500, 500);
      ctx.globalAlpha = alpha;       
      ctx.drawImage(img, 0, 0);
      alpha += step;   
      setTimeout(draw, 100);   // Set timeout for next round of magic
    } else {
      ctx.restore();   // Restoration charm active!
    }
  };
  draw();
};

// Ready? Set. LUMOS!
fadeIn(ctx, img, 1, 0.01);

Composite Magic

And that's not all folks. Meet globalCompositeOperation. This bad boy can give you that definite wow factor.

ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; 
ctx.fillRect(covering_area);
ctx.globalCompositeOperation = 'source-over';

No Ghosting Allowed

By clearing the canvas, you're guarding yourself against any image ghosting.

function updateCanvas() {
  ctx.save();
  ctx.clearRect(0, 0, canvas.width, canvas.height); / No ghosting today, good sir!
  ctx.globalAlpha = newAlpha; // Set the new desired alpha
  // More canvas operations here...
  ctx.restore(); // Restore integrity, like a bouncer after a rowdy Friday night.
}

Pixel-Level Control

For you alpha wolves out there who want more control, there's granular-level control over transparency.

let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  // Every werewolf leader needs control. Here's yours
  data[i + 3] = desiredAlpha; 
}

ctx.putImageData(imageData, 0, 0);

Finer Timing Control

For smoother transitions, requestAnimationFrame navigates frame rate better than setTimeout or setInterval.

let alpha = 0;
const maxOpacity = 1;
const fadeInDuration = 2000; 

function animateFadeIn(startTime) {
  const elapsed = Date.now() - startTime;

  alpha = Math.min(elapsed / fadeInDuration, maxOpacity);

  ctx.globalAlpha = alpha;
  // More of your canvas magic here...

  if (elapsed < fadeInDuration) {
    requestAnimationFrame(() => animateFadeIn(startTime));
  } else {
    ctx.globalAlpha = maxOpacity;  // For the clean finish
  }
}

requestAnimationFrame(() => animateFadeIn(Date.now()));  // The grand start