Question

I’m looking to create a simple animation loop using html canvas. Each path(or triangle) is intended to fade-in in sequence and then fade-out in the same sequence. I’ve found a great deal of resources around animating with motion, but not with alpha and especially not animating paths in succession within canvas. Any ideas?

Disclaimer: This is my first foray into using canvas, and my javascript knowledge is shoddy. Since I’m using the same shape, I’m going to figure out how to replicate, rotate and translate the original as a separate learning.

Update 1: To track my progress, here is a link to my sandbox.

Update 2: I changed the structure of the script to give me more control over each path.

var elem = document.getElementById('loader');

if (elem && elem.getContext) {

var ctxYellow = elem.getContext('2d');
var ctxOrange = elem.getContext('2d');
var ctxRed = elem.getContext('2d');
var ctxViolet = elem.getContext('2d');
var ctxBlue = elem.getContext('2d');

// Yellow triangle
if (ctxYellow) {
    ctxYellow.fillStyle = '#f5ab1c';
    ctxYellow.beginPath();
    ctxYellow.moveTo(150, 150);
    ctxYellow.lineTo(20, 75);
    ctxYellow.lineTo(150, 0);
    ctxYellow.lineTo(150, 150);
    ctxYellow.fill();
    ctxYellow.closePath();
}

// Orange triangle
if (ctxOrange) {
    ctxOrange.fillStyle = '#f26d23';
    ctxOrange.beginPath();
    ctxOrange.moveTo(150, 150);
    ctxOrange.lineTo(150, 0);
    ctxOrange.lineTo(280, 75);
    ctxOrange.lineTo(150, 150);
    ctxOrange.fill();
    ctxOrange.closePath();
}

// Red triangle
if (ctxRed) {
    ctxRed.fillStyle = '#cd1f44';
    ctxRed.beginPath();
    ctxRed.moveTo(150, 150);
    ctxRed.lineTo(280, 75);
    ctxRed.lineTo(280, 225);
    ctxRed.lineTo(150, 150);
    ctxRed.fill();
    ctxRed.closePath();
}

// Violet triangle
if (ctxViolet) {
    ctxViolet.fillStyle = '#851a54';
    ctxViolet.beginPath();
    ctxViolet.moveTo(150, 150);
    ctxViolet.lineTo(280, 225);
    ctxViolet.lineTo(150, 300);
    ctxViolet.lineTo(150, 150);
    ctxViolet.fill();
    ctxViolet.closePath();
}

// Blue triangle
if (ctxBlue) {
    ctxBlue.fillStyle = '#295a9c';
    ctxBlue.beginPath();
    ctxBlue.moveTo(150, 150);
    ctxBlue.lineTo(150, 300);
    ctxBlue.lineTo(20, 225);
    ctxBlue.lineTo(150, 150);
    ctxBlue.fill();
    ctxBlue.closePath();
}
}

Answer 1

OK, I kind of cheated. I ended up using jQuery. Here’s what I came out with:

var elem = document.getElementById('yellow');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(245,171,28,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(20,75);
    ctx.lineTo(150,0);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('orange');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(242,109,35,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(150,0);
    ctx.lineTo(280,75);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('red');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(205,31,68,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(280,75);
    ctx.lineTo(280,225);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
 }

var elem = document.getElementById('violet');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(133,26,84,1)';
    ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(280,225);
    ctx.lineTo(150,300);
    ctx.lineTo(150,150);
    ctx.fill();
    ctx.closePath();
}

var elem = document.getElementById('blue');

if (elem && elem.getContext) {
var ctx = elem.getContext('2d');
    ctx.fillStyle = 'rgba(41,90,156,1)';
    ctx.beginPath();
    ctx.moveTo(150, 150);
    ctx.lineTo(150, 300);
    ctx.lineTo(20, 225);
    ctx.lineTo(150, 150);
    ctx.fill();
    ctx.closePath();
}

$(function() {
var timer = null;

var anim = function() {
    $.each([yellow, orange, red, violet, blue], function(i, el) {
        $('.color' + (i + 1)).delay(100 * i).fadeIn();
    });

    setTimeout(function() {
        $.each([yellow, orange, red, violet, blue], function(i, el) {
            $('.color' + (i + 1)).delay(100 * i).fadeOut();
        });
    }, 1500);

    if (!timer) {
        return timer = setInterval(anim, 3000);
    } else {
        return;
    }
}

anim();

})

I made separate canvases for each path, absolutely positioned them, and animated them with jQuery. Thanks for the advice! It helped.

Update: My roommate walked me through some improvements to clean up the code and make it run smoother. I still can’t get this to work in Firefox, though.