You can use puppeteer to load the page inside a headless chrome instance

• Open the page and wait for it to load
• Using page.evaluate return the dataUrl of the canvas
• Convert the dataUrl to a buffer and write the result to a file

const puppeteer = require('puppeteer');
    const fs = require('fs');

    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto('https://games.novatoz.com/jigsaw-puzzle');

        const dataUrl = await page.evaluate(async () => {
            const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));

            await sleep(5000);

            return document.getElementById('canvas').toDataURL();
        });

        const data = Buffer.from(dataUrl.split(',').pop(), 'base64');

        fs.writeFileSync('image.png', data);
        await browser.close();
    })();

I know one can use tools such as wget or curl to perform HTTP requests from the command line, or use HTTP client requests from various programming languages. These tools also support fetching images or other files that are referenced in the HTML code.

What I’m searching for is a mechanism that also executes the JavaScript of that web page that renders an image into an HTML canvas. I then want to extract that rendered image as an image file. The goal to achieve is to grab a time series of those images, e.g. weather maps or other diagrams that plot time-variant data into a constant DOM object, via a cron job.

I’d prefer a solution that works from a script. How could this be done?