To fade an image onto a canvas, set the context’s `globalAlpha` before drawing it. Start with low opacity, increase alpha on each animation frame, and stop at 0.99; a promise can resolve when the fade finishes. section 34.2
function fade(image) {
return new Promise(resolve => { 1
function fadeIn(alpha) { 2
draw(image, alpha); 3
if (alpha >= .99) {
resolve(); 4
} else {
alpha += (1-alpha)/24; 5
window.requestAnimationFrame(() => fadeIn(alpha)); 5
}
}
fadeIn(0.1); 6
});
}
!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":1,\"ch\":62},{\"line\":1,\"ch\":63}],[{\"line\":7,\"ch\":18},{\"line\":7,\"ch\":19}],[{\"line\":11,\"ch\":13},{\"line\":11,\"ch\":14}],[{\"line\":2,\"ch\":62},{\"line\":2,\"ch\":63}],[{\"line\":7,\"ch\":27},{\"line\":7,\"ch\":28}],[{\"line\":3,\"ch\":62},{\"line\":3,\"ch\":63}],[{\"line\":5,\"ch\":62},{\"line\":5,\"ch\":63}],[{\"line\":7,\"ch\":28},{\"line\":7,\"ch\":29}],[{\"line\":7,\"ch\":62},{\"line\":7,\"ch\":63}],[{\"line\":8,\"ch\":62},{\"line\":8,\"ch\":63}],[{\"line\":7,\"ch\":62},{\"line\":7,\"ch\":63}],[{\"line\":8,\"ch\":62},{\"line\":8,\"ch\":63}],[{\"line\":11,\"ch\":62},{\"line\":11,\"ch\":63}]]"}
!@%STYLE%@!
The fade starts at 0.1, redraws with increasing alpha, and resolves its promise at 0.99. section 34.2
