JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/streamsaver@2.0.3/StreamSaver.min.js"></script>
<button onclick="saveImage()">Save Image</button><span class="message"></span>
<canvas width="12000" height="12000"></canvas>

CSS

body {
  margin: 0;
}

JavaScript

const randomRGB = () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  return `rgb(${r}, ${g}, ${b})`;
};

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const message = document.querySelector('.message');

for (let i = 0; i < 12000; i += 400) {
  for (let j = 0; j < 12000; j += 400) {
    ctx.fillStyle = randomRGB();
    ctx.fillRect(i, j, 400, 400);
  }
}

function saveImage() {
  message.innerText = 'Generating image...';
  const start = performance.now();
  const blob = canvas.toBlob(async function (blob) {
    const fileStream = streamSaver.createWriteStream('test.png');
    
    const readableStream = blob.stream();
    await readableStream.pipeTo(fileStream);

    const end = performance.now();
    console.log(end - start);
    
    message.innerText = 'Done!';
  });
}