Consider <textarea> 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 ?

While in Sciter, that has such immediate mode rendering form the very beginning, you can simply draw them as:

   resizableElement.paintForeground = function(gfx) { // draw on top of background & content

      let box = this.getBoundingClientRect();
      gfx.moveTo(...); gfx.lineTo(...);
      gfx.moveTo(...); gfx.lineTo(...);
      ...
   }

Easy, right? And does not need to modify DOM and place artificial positioned elements.

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.

Near the top:

> to set complex custom backgrounds on an element

Basically the same reasons you might need draw() in traditional GUIs.

Do this in CSS: https://camo.githubusercontent.com/b6c45f60f6e450574c4087589...

(image taken from the other guy's comment's gh repo)

Reusable dynamic canvas code as background image? ¯\_(ツ)_/¯

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...