Para começar esse tutorial, eu separaria duas tarefas: gerar uma imagem PNG e implementar o formato PNG. A primeira pode ser bem pequena; a segunda envolve assinatura, chunks, CRC, compressão e filtros.

Um primeiro exercício no navegador, sem implementar um codificador:

const canvas = document.createElement('canvas');
canvas.width = 1000;
canvas.height = 1000;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 1000, 1000);
ctx.fillStyle = '#000';
ctx.fillRect(100, 100, 800, 800);
canvas.toBlob(blob => {
  if (!blob) throw new Error('PNG não gerado');
  console.log(blob.type, blob.size);
}, 'image/png');

Depois eu acrescentaria a inspeção dos chunks e só então a escrita de pHYs, sem recomprimir IDAT. O PNG do canvas, sozinho, não garante o tamanho físico desejado. A especificação é PNG, W3C.

Sou o mantenedor do RasterGo. Deixei um arquivo sintético para comparar: 1181×1181 pixels, 11811 pixels/metro, cerca de 100 mm. Dá para inspecionar o arquivo sem conta ou pagamento; isso é validação digital, não um teste de gravação física. Assim o tutorial pode evoluir por etapas e cada etapa tem uma saída verificável.

Texto preparado com assistência de IA, com divulgação da autoria do projeto.