CSS Painting API

jauco · 2025-05-26T21:56:23 1748296583

The most fun I had with this was to make initial versions of apps look alpha using https://github.com/pshihn/rough-paint

90s_dev · 2025-05-26T22:04:20 1748297060

Amazing example and show-case, great job. Reminded me of my pinstripes:

https://os.90s.dev/#sys/apps/paint.app.js

https://github.com/sdegutis/os.90s.dev/blob/31bf4ec46e02367b...

But yours is much fancier and cooler.

pjmlp · 2025-05-27T07:32:52 1748331172

This is part of Project Houdini from Google, it has been years out there without being picked up by other browsers.

https://developer.chrome.com/docs/css-ui/houdini

Anyone remembers the CSS rendering extensions on IE 5?

That's right, the more things change, the more they stay the same.

goranmoomin · 2025-05-26T23:24:33 1748301873

If I'm understanding correctly, isn't this introducing a critical dependency on JavaScript during rendering? I get that people might want to draw stuff with code, but why would people use this (and introduce render performance problems inadvertently) instead of using the HTML5 Canvas API?

AgentME · 2025-05-26T23:37:55 1748302675

The HTML5 Canvas API can only be used in the main javascript thread, so whenever the page's javascript thread is busy with anything then the browser has to wait on that to finish before being able to have it update anything it rendered. The Paint Worklets allow the browser to run some page javascript just for rendering in one or more separate threads.

MortyWaves · 2025-05-27T00:05:20 1748304320

But why can the canvas still only be accessed in the main thread? Why introduce a whole other API as a workaround for this?

Also, as far as I have seen, people have been using WebAssembly for complex stuff and marshalling it to the main thread for the canvas.

AgentME · 2025-05-27T17:12:43 1748365963

The worklet API gives the browser the ability to spawn as many threads for the task as it wants when it wants, without needing to communicate and wait on the page's code in the main javascript thread each time.

yladiz · 2025-05-27T00:14:48 1748304888

It doesn’t refute your point, because a worklet is a worker and thus not in the main thread, but the canvas API is usable outside of the main thread as well, via OffscreenCanvas or something like transferring to a worker.

90s_dev · 2025-05-26T21:28:50 1748294930

We came full circle. We started out overriding draw(), then HTML + CSS took over, and now we're back to overriding draw(). This was a huge inspiration for 90s.dev

reverseblade2 · 2025-05-27T03:14:00 1748315640

Here’s a cross browser example I built for my personal site. See the curve: http://onur.works

chrismorgan · 2025-05-27T06:28:08 1748327288

That’s badly broken in a variety of ways at a variety of window sizes in both Firefox and Chromium, though worse in Firefox where it goes from being unpleasant to downright unusable at some sizes; and at larger resolutions in Firefox it’s not even managing 3fps. What are you doing? You’re meddling with scrolling, too. :-(

reverseblade2 · 2025-05-27T20:18:42 1748377122

I am not seeing any issues on Chrome. To be fair, I mostly cared about Safari and Chrome than Firefox.

Scrolling is about scroll snapping feature.

tyleo · 2025-05-27T13:58:03 1748354283

Also broken on iOS. Goes off my viewport horizontally. Scroll doesn’t work as expected.

reverseblade2 · 2025-05-27T20:17:41 1748377061

There is scroll snapping. Yes it slightly exceeds the horizontal. My point was about the CSS Painting API though :)

reverseblade2 · 2025-05-27T20:38:07 1748378287

Solved the horizontal viewport.

paulryanrogers · 2025-05-26T21:51:51 1748296311

Why? Nothing in that article makes the use case clear. Perhaps I just lack imagination?

c-smile · 2025-05-27T03:57:34 1748318254

Consider

that has resizing handle on the corner (try to reply to this message to see it alive). And now try to imagine how would you render those diagonal lines in HTML/CSS  ?<p>While in Sciter, that has such immediate mode rendering form the very beginning, you can simply draw them as:</p><p></p><pre><code>   resizableElement.paintForeground = function(gfx) { // draw on top of background & content

let box = this.getBoundingClientRect();
      gfx.moveTo(...); gfx.lineTo(...);
      gfx.moveTo(...); gfx.lineTo(...);
      ...
   }
</code></pre>
Easy, right? And does not need to modify DOM and place artificial positioned elements.</div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44103835&goto=item%3Fid%3D44101619%2344103835" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
            <tr class="athing comtr" id="44102834"><td><table border="0">  <tr>    <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44102834" href="vote?id=44102834&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=andrewingram" class="hnuser">andrewingram</a> <span class="age" title="2025-05-27T00:15:14 1748304914"><a href="item?id=44102834">1 day ago</a></span> <span id="unv_44102834"></span>          <span class="navs">
             | <a href="#44102012" class="clicky" aria-hidden="true">parent</a> | <a href="#44103835" class="clicky" aria-hidden="true">prev</a> | <a href="#44102053" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="44102834" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">A few years ago I tried to use it to implement mesh gradients. It didn’t go well, mainly because you can’t draw individual pixels without cheating with lots of 1x1px rectangles. But it was a fun experiment.</div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44102834&goto=item%3Fid%3D44101619%2344102834" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
            <tr class="athing comtr" id="44102053"><td><table border="0">  <tr>    <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44102053" href="vote?id=44102053&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=90s_dev" class="hnuser">90s_dev</a> <span class="age" title="2025-05-26T21:56:26 1748296586"><a href="item?id=44102053">1 day ago</a></span> <span id="unv_44102053"></span>          <span class="navs">
             | <a href="#44102012" class="clicky" aria-hidden="true">parent</a> | <a href="#44102834" class="clicky" aria-hidden="true">prev</a> | <a href="#44102072" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="44102053" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">Near the top:<p>> to set complex custom backgrounds on an element</p><p>Basically the same reasons you might need draw() in traditional GUIs.</p><p>Do this in CSS: <a href="https://camo.githubusercontent.com/b6c45f60f6e450574c4087589453e0158d84cbe60ee690f875622ffb19811f66/68747470733a2f2f692e696d6775722e636f6d2f677a537a7861622e706e67" rel="nofollow">https://camo.githubusercontent.com/b6c45f60f6e450574c4087589...</a></p><p>(image taken from the other guy's comment's gh repo)</p></div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44102053&goto=item%3Fid%3D44101619%2344102053" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
            <tr class="athing comtr" id="44102072"><td><table border="0">  <tr>    <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44102072" href="vote?id=44102072&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=dwoldrich" class="hnuser">dwoldrich</a> <span class="age" title="2025-05-26T21:58:54 1748296734"><a href="item?id=44102072">1 day ago</a></span> <span id="unv_44102072"></span>          <span class="navs">
             | <a href="#44102012" class="clicky" aria-hidden="true">parent</a> | <a href="#44102053" class="clicky" aria-hidden="true">prev</a> | <a href="#44102284" class="clicky" aria-hidden="true">next</a> <a class="togg clicky" id="44102072" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">Reusable dynamic canvas code as background image?  ¯\_(ツ)_/¯<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API/Guide" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...</a></p></div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44102072&goto=item%3Fid%3D44101619%2344102072" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
                  <tr class="athing comtr" id="44102284"><td><table border="0">  <tr>    <td class="ind" indent="0"><img src="s.gif" height="1" width="0"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44102284" href="vote?id=44102284&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=hyperhello" class="hnuser">hyperhello</a> <span class="age" title="2025-05-26T22:33:19 1748298799"><a href="item?id=44102284">1 day ago</a></span> <span id="unv_44102284"></span>          <span class="navs">
             | <a href="#44102012" class="clicky" aria-hidden="true">prev</a> <a class="togg clicky" id="44102284" n="4" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">But you can do this now with Canvas.toDataURL(). Do we need to support another drawing surface API?</div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44102284&goto=item%3Fid%3D44101619%2344102284" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
                <tr class="athing comtr" id="44102299"><td><table border="0">  <tr>    <td class="ind" indent="1"><img src="s.gif" height="1" width="40"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44102299" href="vote?id=44102299&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=90s_dev" class="hnuser">90s_dev</a> <span class="age" title="2025-05-26T22:35:46 1748298946"><a href="item?id=44102299">1 day ago</a></span> <span id="unv_44102299"></span>          <span class="navs">
             | <a href="#44102284" class="clicky" aria-hidden="true">parent</a> <a class="togg clicky" id="44102299" n="3" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">Using toDataURL() has a lot of overhead that this doesn't use. Also this runs in worklets.</div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44102299&goto=item%3Fid%3D44101619%2344102299" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
                <tr class="athing comtr" id="44103088"><td><table border="0">  <tr>    <td class="ind" indent="2"><img src="s.gif" height="1" width="80"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44103088" href="vote?id=44103088&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=Seb-C" class="hnuser">Seb-C</a> <span class="age" title="2025-05-27T01:15:41 1748308541"><a href="item?id=44103088">1 day ago</a></span> <span id="unv_44103088"></span>          <span class="navs">
             | <a href="#44102284" class="clicky" aria-hidden="true">root</a> | <a href="#44102299" class="clicky" aria-hidden="true">parent</a> <a class="togg clicky" id="44103088" n="2" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">Blob URLs should work without much overhead.</div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44103088&goto=item%3Fid%3D44101619%2344103088" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
                <tr class="athing comtr" id="44103136"><td><table border="0">  <tr>    <td class="ind" indent="3"><img src="s.gif" height="1" width="120"></img></td><td valign="top" class="votelinks">
      <center><a id="up_44103136" href="vote?id=44103136&how=up&goto=item%3Fid%3D44101619"><div class="votearrow" title="upvote"></div></a></center>    </td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
          <a href="user?id=esprehn" class="hnuser">esprehn</a> <span class="age" title="2025-05-27T01:24:32 1748309072"><a href="item?id=44103136">1 day ago</a></span> <span id="unv_44103136"></span>          <span class="navs">
             | <a href="#44102284" class="clicky" aria-hidden="true">root</a> | <a href="#44103088" class="clicky" aria-hidden="true">parent</a> <a class="togg clicky" id="44103136" n="1" href="javascript:void(0)">[–]</a><span class="onstory"></span>          </span>
                  </span></div><br></br><div class="comment">
                  <div class="commtext c00">That won't handle resizing properly. This API lets you hook directly into the painting phase of rendering in the browser so you can both draw the correct size without forcing layout and handle resizing. It also gives the browser the flexibility to not paint the off screen content at all.</div>
              <div class="reply">        <p><font size="1">
                      <u><a href="reply?id=44103136&goto=item%3Fid%3D44101619%2344103136" rel="nofollow">reply</a></u>
                  </font>
      </p></div></div></td></tr>
        </table></td></tr>
                              </table>
  <br></br><br></br>
</td></tr>
<tr><td><img src="s.gif" height="10" width="0"></img><table width="100%" cellspacing="0" cellpadding="1"><tr><td bgcolor="#ff6600"></td></tr></table><br></br>
<center><span class="yclinks"><a href="newsguidelines.html">Guidelines</a> | <a href="newsfaq.html">FAQ</a> | <a href="lists">Lists</a> | <a href="https://github.com/HackerNews/API">API</a> | <a href="security.html">Security</a> | <a href="https://www.ycombinator.com/legal/">Legal</a> | <a href="https://www.ycombinator.com/apply/">Apply to YC</a> | <a href="mailto:hn@ycombinator.com">Contact</a></span><br></br><br></br>
<form method="get" action="//hn.algolia.com/">Search: <input type="text" name="q" size="17" autocorrect="off" spellcheck="false" autocapitalize="off" autocomplete="off"></input></form></center></td></tr>      </table></center>
      
  </body>        </div>
    </div>
</div>
<div class='clear'></div>    </div>
    <div style='position:fixed; bottom:0; left:0; right:0;'>
        </div>
    <div align='center' style='border-top:1px solid #EEE; padding:1em; margin-top:2em;'>
  联系我们 contact @ memedata.com
</div>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-PFMR8YTWGP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-PFMR8YTWGP');
</script>
</body>
</html>

(评论) (comments)

(评论)
(comments)