Canvas Fade Effect

by Santiago J

HTML

<canvas id="stage"></canvas>

CSS

#stage {
    outline: 1px solid #000;
}

JavaScript

var ctx = document.querySelector("#stage").getContext("2d");
ctx.fillStyle = "#468";

for (var i = 0; i < 20; i++) {
    ctx.save();
    ctx.globalCompositeOperation = "copy";
    ctx.globalAlpha = 0.8;
    ctx.drawImage(ctx.canvas, 0, 0);
    ctx.restore();
    ctx.fillRect(5*i, 5*i, 20, 20);
}