How to optimize this HTML5 animation?
Always do a clearInterval() before doing a new setInterval() on the same variable. Doesn't matter if it has been cleared or not.

e.g.

clearInterval(revealImage);
revealTimer = setInterval(revealImage,100);


You're code has a bug where the revealTimer is being reset before being cleared. 

Why do you need to reset it?

function init() {   
    ctx = document.getElementById("canvas").getContext("2d");
    setInterval(switchImage,3000);
    setInterval(revealImage,100);
}


Should work just as well.