3 ms·
Why? Nothing in that article makes the use case clear. Perhaps I just lack imagination?
by paulryanrogers 1y ago
Why? Nothing in that article makes the use case clear. Perhaps I just lack imagination?
- 90s_dev 1y agoNear 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/b6c45f60f6e450574c4087589453e0158d84cbe60ee690f875622ffb19811f66/68747470733a2f2f692e696d6775722e636f6d2f677a537a7861622e706e67 https://camo.githubusercontent.com/b6c45f60f6e450574c4087589... (image taken from the other guy's comment's gh repo)
- dwoldrich 1y agoReusable dynamic canvas code as background image? ¯\_(ツ)_/¯ https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API/Guide https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
- andrewingram 1y agoA 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.
- c-smile 1y agoConsider <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.