A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

CSS4 element() good alternative - CSS4 paint-source()


I think Mozilla element() - old age.


I suggest alternative for CSS element(). I suggest CSS4 image property paint-source(id_or_name). With this API can be used any element that have paint-source for canvas. Element can be located in shadow DOM, or document. Element should have “id” for identity. These elements: img, canvas, video. Also possible register any paint source for CSS through JS.


/* Declare DOM id of paint source directly */
.paint {
  background-image: paint-source("#domcanvas");

/* Declare path to paint source of element, or parent (should defined by JS) */
.paint2 {
  background-image: paint-source("anyjs");


I suggest [element].style.setPaintSource(name, paintSource) for any DOM element, that applies paint source to this element, and every children.

let canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
let ctx = canvas.getContext("2d");
let imageData = ctx.getImageData(0, 0, 100, 100);
document.body.style.setPaintSource("anyjs", imageData);

Also, setPaintSource available not only for document, but for any element, like CSS variables.

let canvas = document.createElement("canvas");
image.style.setPaintSource("mycanvas", canvas)

Paint API

Paint source can be applied with CSS Paint API.

.some {
  --image: paint-source("anything");
  background: paint(something);

DOM Element JS

Available for any parent element. Set paint source from DOM.

element.style.setPaintSourceFromId("anyjs", "element");



  • No need recursion detection
  • Used only recommended elements for canvases
  • Flexible as CSS variables
  • Can be emulated through CSS variables and dynamic exporting images


  • No background, border, text, etc… I think this is not need!
  • Required static size (except background-size)


These paint source NOT applying element background images, colors, etc.

Function paint-source() declare to draw only video or image data to background of element.

Sources for paint-source() should have intrinsic size. So SVG should be rasterized or defined size.