To paint an image onto an HTML canvas, first get its 2D context. The context provides `drawImage`, which can select a source rectangle and place it in a destination rectangle. 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
);
}
This function sets `globalAlpha` before drawing, so the image is painted with the requested transparency. section 34.2
Fade an image in
Draw the image repeatedly, increasing alpha by `(1 - alpha) / 24` each time. Stop at 0.99 opacity; otherwise, schedule the next draw with `requestAnimationFrame`. section 34.2
