canvas.js

// Constants
const EXIT_SUCCESS = 0;
const EXIT_FAILURE = 1;

// Method1: Query getCanvasSlice() 36 times, sequential
async function method1(contract) {
    for(let i = 0; i < 36; i++) {
        var args = [(i).toString(), (i+1).toString()];
        await contract.getCanvasSlice(...args);
    }
}

// Method2: Query getCanvasSlice() 36 times, parallel
async function method2(contract) {
    var promises = [];
    
    for(let i = 0; i < 36; i++) {
        var args = [(i).toString(), (i+1).toString()];
        promises.push(contract.getCanvasSlice(...args));
    }
    
    const results = await Promise.all(promises);
}

// Method2: Query getCanvasCell() 1296 times, parallel
async function method3(contract) {
    var promises = [];
    
    for(let i = 0; i < 36; i++) {
        for(let j = 0; j < 36; j++) {
            var args = [(i).toString(), (j).toString()];
            promises.push(contract.getCanvasCell(...args));
        }
    }
    
    const results = await Promise.all(promises);
}

// Main function
async function main() {
    const HRE_EOAs = await hre.ethers.getSigners();
    const factory  = await hre.ethers.getContractFactory("Canvas", HRE_EOAs[0]);
    
    // Deploy contract
    const contract = await factory.deploy();
    await contract.deployed();
    
    console.time('method1');
    await method1(contract); // 6,062,172 gas, 6.811s
    console.timeEnd('method1');
    
    console.time('method2');
    await method2(contract); // 6,062,172 gas, 3.885s
    console.timeEnd('method2');
    
    console.time('method3');
    await method3(contract); // 119,714,796 gas, 5.370s
    console.timeEnd('method3');
}

main()
    .then(() => {
        process.exit(EXIT_SUCCESS);
    })
    .catch((error) => {
        console.error(error);
        process.exit(EXIT_FAILURE);
    });