API CSS Paint: Worklets

A API CSS Paint é um recurso do CSS Houdini que permite escrever funções de worklet em JavaScript para gerar programaticamente planos de fundo, bordas e máscaras — ampliando, na prática, o que o CSS background-image pode renderizar.

Um Paint Worklet é um arquivo JavaScript executado em um escopo separado de worklet (não na thread principal). Ele registra um pintor personalizado do CSS que pode ser usado como um valor do CSS.

Uma classe de worklet implementa o método paint():

Carregue o worklet a partir do seu JavaScript principal:

Faça referência ao nome do pintor registrado em qualquer propriedade que aceite uma imagem:

Os pintores podem ler propriedades personalizadas do CSS declarando-as como propriedades de entrada:

O parâmetro ctx é um PaintRenderingContext2D — uma versão restrita do contexto 2D do Canvas. Você usa métodos conhecidos: fillRect, arc, bezierCurveTo etc.

A API de pintura do CSS permite:

• Fundos geométricos complexos sem SVG
• Fundos baseados em dados variáveis (barras de progresso, gráficos de atividade)
• Efeitos de ondulação em botões controlados por propriedades personalizadas
• Efeitos complexos de borda (tracejados, hachurados)
• Divisores ondulados e formas orgânicas

Os módulos de trabalho de pintura são executados fora da thread principal (em um contexto separado de módulo de trabalho) e são repintados somente quando suas propriedades personalizadas do CSS mudam. Isso é mais eficiente do que o desenho baseado em Canvas, que é executado na thread principal.

A API de pintura do CSS é compatível com Chrome 65+ e Edge 79+. Firefox e Safari não são compatíveis com ela até 2024. Use-a como aprimoramento progressivo.

Sempre forneça uma alternativa de reserva e use @supports para aplicar o módulo de trabalho de pintura somente quando houver compatibilidade:

Qual método uma classe de módulo de trabalho de pintura do CSS implementa para realizar o desenho?

A API de pintura do CSS permite que módulos de trabalho JavaScript gerem imagens CSS programaticamente. Escreva uma classe com um método paint(), registre-a com registerPaint(), carregue-a com CSS.paintWorklet.addModule() e use-a como background: paint(name). Os módulos de pintura podem ler propriedades personalizadas do CSS para criar elementos visuais orientados por dados. Forneça alternativas de reserva com @supports.