Skia Canvas: implementação sem navegador da API de desenho HTML Canvas para Node

Introdução

• Skia Canvas é uma biblioteca que implementa a API de desenho do HTML Canvas no Node.js sem navegador.
• Baseada no mecanismo gráfico Skia do Google, ela gera resultados semelhantes ao elemento <canvas> do Chrome.
• É adequada para renderizar gráficos com aceleração por hardware em desktops e servidores ou gerar saída em diversos formatos de imagem.

Principais recursos

• A renderização é feita na GPU, sendo rápida e compacta, e o trabalho é processado por código nativo escrito em Rust e C++.
• Pode renderizar em janelas usando pipelines gráficos nativos do sistema operacional e oferece um framework de eventos de UI semelhante ao de navegadores.
• Pode gerar imagens em formatos raster (JPEG, PNG, WEBP) e vetoriais (PDF, SVG).
• Pode salvar imagens em arquivo, retorná-las como buffer ou codificá-las como string dataURL.
• Usa threads nativas em um pool de workers configurável pelo usuário para renderização assíncrona e I/O de arquivos.
• Pode criar várias “páginas” em um determinado canvas e exportá-las como um único PDF multipágina ou como uma sequência de imagens salva em vários arquivos.
• Pode simplificar, suavizar, combinar, extrair e atomizar caminhos Bézier usando operações booleanas eficientes ou interpolação ponto a ponto.
• Além de escala, rotação e transformação, oferece transformações de perspectiva 3D.
• Além de padrões baseados em bitmap, pode preencher formas com texturas vetoriais e desenhar linhas com marcadores personalizados.
• Oferece suporte completo a operadores de processamento de imagem com filtros CSS.
• Fornece controle tipográfico avançado, incluindo texto multilinha com quebra de palavras, métricas de texto por linha, small caps, ligaduras e outros recursos OpenType.
• É possível carregar e usar fontes que não sejam do sistema a partir de arquivos locais.

Exemplos de uso

Geração de arquivo de imagem

• Exemplo de uso de Canvas para criar um canvas de 400x400 e obter o contexto 2D.
• Exemplo que usa createConicGradient para adicionar um gradiente de cores e desenhar um retângulo.
• Explica como salvar a imagem, convertê-la em buffer ou incorporá-la como string por meio da função assíncrona render.

Sequência multipágina

• Explica como criar páginas com várias cores e salvá-las como um arquivo PDF multipágina ou como arquivos de imagem individuais.

Renderização em janela

• Explica como usar Window para criar uma janela de 300x300 e desenhar um círculo por meio do evento draw.

[GN⁺]

Comentários do Hacker News

• https://windowjs.org é um projeto que encapsula o Skia, o expõe por meio da API Canvas e incorpora o v8 para fornecer um runtime pequeno

  • Foi lançado pela primeira vez como open source há 3 anos
  • Havia planos de expor WebGL, áudio etc. e transformá-lo em uma plataforma para jogos em JavaScript no desktop
  • O desenvolvimento foi interrompido por causa de outros projetos e mudanças na vida, mas é bom ver este projeto que permite usar Canvas fora do navegador

• Se você tem interesse em implementações de Canvas compatíveis com Node, vale conferir o seguinte

  • canvaskit-wasm é fornecido pelo projeto Skia e aparentemente não oferece suporte a aceleração por GPU
  • @napi-rs/canvas oferece os bindings mais rápidos
  • node-canvas usa Cairo em vez de Skia

• Há curiosidade sobre para que essas bibliotecas são usadas

  • Existe a opinião de que no desktop haveria bibliotecas nativas melhores

• O Skia oferece o CanvasKit, um build WASM com suporte a Node, e este módulo é um binding em Rust

  • Há interesse nos prós e contras de cada abordagem

• Há uma pergunta sobre se isso é semelhante a um wrapper de crate Rust

• Foi criado algo parecido para Node/Web, e embora não seja perfeito, é bom

  • É possível usar SDL para criar janelas no sistema operacional
  • Dá para conferir a documentação e os exemplos

• Tentativas anteriores exigiam instalação com Node-Gyp, o que era difícil

  • Este projeto era esperado havia muito tempo

• É mais do que uma API de renderização simples

  • Pode renderizar em janelas usando o pipeline gráfico nativo do sistema operacional e fornece um framework de eventos de UI semelhante ao do navegador
  • É possível adicionar wgpu para suporte a WebGPU e ANGLE para suporte a WebGL

• É usado em https://malmal.io para renderizar tiles desenhados no servidor, e funciona muito bem

• Há curiosidade sobre se isso ajudaria a renderizar o MapLibre no lado do servidor

  • Para fornecer miniaturas de mapas