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


#1

I think Mozilla element() - old age.

About

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.

Examples

/* 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");
}

JS

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");

Advantages

Pro:

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

Con:

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

Limitation

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.

Polyfill

https://github.com/acterhd/css-paint-source-polyfill