Skia Canvas: implementación sin navegador de la API de dibujo HTML Canvas para Node

Introducción

• Skia Canvas es una biblioteca que implementa la API de dibujo de HTML Canvas en Node.js sin necesidad de navegador.
• Está basada en el motor gráfico Skia de Google y genera resultados similares al elemento <canvas> de Chrome.
• Es adecuada para renderizar gráficos con aceleración por hardware en escritorio y servidor, o para exportar a varios formatos de imagen.

Funciones principales

• El renderizado se realiza en la GPU, por lo que es rápido y compacto, y procesa el trabajo con código nativo escrito en Rust y C++.
• Puede renderizar en ventanas usando el pipeline gráfico nativo del sistema operativo y ofrece un framework de eventos de UI similar al del navegador.
• Puede generar imágenes en formatos ráster (JPEG, PNG, WEBP) y vectoriales (PDF, SVG).
• Puede guardar imágenes en archivos, devolverlas como buffer o codificarlas como cadenas dataURL.
• Usa hilos nativos en un pool de workers configurable por el usuario para renderizado asíncrono y E/S de archivos.
• Puede crear varias "páginas" en un canvas dado y exportarlas como un solo PDF multipágina o como una secuencia de imágenes guardadas en varios archivos.
• Puede simplificar, suavizar, combinar, extraer y atomizar trazos Bézier usando operaciones booleanas eficientes o interpolación punto a punto.
• Además de escalado, rotación y transformaciones, ofrece transformaciones de perspectiva 3D.
• Además de patrones basados en mapas de bits, puede rellenar formas con texturas vectoriales y dibujar líneas con marcadores personalizados.
• Ofrece soporte completo para operadores de procesamiento de imágenes con filtros CSS.
• Proporciona un control tipográfico avanzado, incluyendo texto multilínea, ajuste de palabras, métricas de texto por línea, versalitas, ligaduras y otras funciones OpenType.
• Se pueden cargar y usar fuentes no incluidas en el sistema desde archivos locales.

Ejemplos de uso

Generación de archivos de imagen

• Se crea un canvas de 400x400 con Canvas y se obtiene un contexto 2D.
• Se muestra un ejemplo de cómo agregar un degradado de color con createConicGradient y dibujar un rectángulo.
• Se explica cómo guardar la imagen, convertirla en buffer o incrustarla como cadena mediante la función asíncrona render.

Secuencia multipágina

• Se explica cómo crear páginas de varios colores y guardarlas como un archivo PDF multipágina o como archivos de imagen individuales.

Renderizado en ventana

• Se explica cómo crear una ventana de 300x300 con Window y dibujar un círculo mediante el evento draw.

[GN⁺]

Opiniones de Hacker News

• https://windowjs.org es un proyecto que envuelve Skia, lo expone como una API de Canvas e integra v8 para ofrecer un runtime pequeño

  • Fue publicado por primera vez como open source hace 3 años
  • Había planes de exponer WebGL, audio y más para convertirlo en una plataforma para juegos de escritorio basados en JavaScript
  • El desarrollo se detuvo por otros proyectos y cambios en la vida, pero da gusto ver este proyecto que permite usar Canvas fuera del navegador

• Si te interesa una implementación de Canvas compatible con Node, puedes revisar lo siguiente

  • canvaskit-wasm es ofrecido por el proyecto Skia y parece que no soporta aceleración por GPU
  • @napi-rs/canvas ofrece el binding más rápido
  • node-canvas usa Cairo en lugar de Skia

• Hay curiosidad sobre el propósito de uso de estas bibliotecas

  • Existe la opinión de que en escritorio habría mejores bibliotecas nativas

• Skia ofrece CanvasKit, una compilación WASM compatible con Node, y este módulo es un binding de Rust

  • Hay interés en las ventajas y desventajas de cada enfoque

• Hay una pregunta sobre si es similar al wrapper de un crate de Rust

• Se hizo algo parecido para Node/Web y está bien, aunque no es perfecto

  • Puede crear ventanas en el sistema operativo usando SDL
  • Se pueden revisar la documentación y los ejemplos

• Los intentos anteriores eran difíciles porque requerían instalar Node-Gyp

  • Este proyecto se había estado esperando desde hace mucho tiempo

• Es más que una simple API de renderizado

  • Puede renderizar en ventanas usando el pipeline gráfico nativo del sistema operativo y ofrece un framework de eventos de UI similar al del navegador
  • Se puede agregar wgpu para soporte de WebGPU y ANGLE para soporte de WebGL

• Se usa en https://malmal.io para renderizar tiles dibujados en el servidor, y funciona muy bien

• Hay curiosidad sobre si ayudaría a renderizar MapLibre del lado del servidor

  • Para ofrecer miniaturas de mapas