Firefox

Ah nah Canvas is used for so much stuff and it's sometimes way under your radar in stuff you wouldn't at all expect

For instance

• one-loop.github.io, opensource reddit front-end that allows you to look at reddit, but it looks like you're reading outlook from a distance
• For people's avatars, it sources images from thispersondoesnotexist.com
• You can't just "download" a picture from another website, because that violates "CORS": If it were allowed, you could just download their face from facebook.com, scan if they have something hosted on localhost, ...
• You can use an tag which fetches the image, but your javascript cannot access the image's data. It doesn't belong to your page

I'll let you look at the comments to see how they circumvented this

async function generateFacePic(commentData: SnooComment, ppBuffer: HTMLImageElement[], displaySize: number = 50): Promise {
    const imageSeed = /* a random number */
    const imageElement: HTMLImageElement = /* someone's avatar */

    // Purpose of copying: A single  tag cannot be in multiple spots at the same time
    // I did not find a way to duplicate the reference to an img tag 
    // If you use Element.appendChild with the same reference multiple times, the method will move the element around
    // Creating a new  tag and copying the attributes would work, but it would fetch the src again
    // The image at thispersondoesnotexist changes every second so the src points to a new picture now
    // Since the URL has a parameter and hasn't changed, then most likely, querying the URL again would
    //     hit the browser's cache. but we can't know that.
    // Solution: make a canvas and give it the single  reference. It makes a new one every time. It doesn't query the src.
    const canv = copyImage2Canvas(imageElement, displaySize);

    canv.classList.add(`human-${imageSeed}`);
    return canv;
}

I've seen canvas being used for github-like random avatars, graphs, logos, to create dynamic previews of images on the page in online shops, ...