Want a canvas image to fade in? Set the context’s globalAlpha before drawing: it applies transparency to what the context paints. section 34.2
function draw(img, alpha=1) {
const gal = document.getElementById('gallery');
const ctx = gal.getContext('2d');
ctx.globalAlpha = alpha;
ctx.drawImage(img,
0, 0, img.width, img.height,
0, 0, gal.width, gal.height
);
}
The draw function accepts an alpha value and assigns it to the context before drawing the image. With no value supplied, it uses 1. section 34.2
Fade an image in
Draw the image at its current alpha, then increase alpha by `(1-alpha)/24` and redraw on the next animation frame. Stop at `.99`; the transition can resolve a promise when it finishes. section 34.2
