Hacker News Reader

Comment by dvh | Hacker News Reader

Wouldn't it make more logical sense to add canvas to html elements? I.e. checkbox.getContext("2d").fillRect(...)

I guess there are uses for that, but as a web game developer, that wouldn’t really help me. The killer feature is input and text rendering.

Or to add canvas operations (in?)directly to CSS!

Imagine being able to declare a list of paths with fill/stroke-paints to draw, filled in from attributes, variables and `calc()` values... one can only dream.

Already exists, albeit experimental and Chromium-only: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...

Yes, I'm aware of this API, but that's exactly the problem (IMHO): it's an API, not built right into CSS itself, thus forcing you to use JavaScript.

What I really want is something along the lines of...

    @declare-some-shape MYSHAPE (ARGS) {
        /* tree of draw commands */
        /* can reference css animations, timelines, variables, etc. */
    }
    
    #my-div { content: draw-some-shape(MYSHAPE ARGS, TRANSFORM); }

    /* or, as some kind of pseudo-element: */
    #my-div::draw-some-shape(MYSHAPE) { ??? }

And yeah, fully aware that this looks abominable, but I'd rather this than stringly/DOMly generating SVGs or drawing in a canvas.

Absolutely not. You can already embed SVG as a data URI if you really, really want to (and you could probably implement this in SCSS with data URI output if you want to suffer doubly...).

Which requires doing a ton of math/layout in JavaScript, since I need those shapes to go between, around and behind the normal HTML elements (working on games and editors here).

Doing all that is a colossal PITA, since SVGs aren't built to act as "fragments" I can arbitrarely draw with CSS or Canvas.

This new html-in-canvas API will alleviate the pain a bit, at least.

Not if you need your html to adapt to the shape of a 3d object drawn in the canvas.

What you described is the CSS painting api (part of CSS Houdini)

Reply on news.ycombinator.com