fun canvas bug: set globalAlpha to 0, add shadows, draw text. every browser renders nothing. because alpha is zero. that's the whole point.
Safari renders the text anyway. shadows somehow bypass globalAlpha for text fills. 10+ years of canvas work and Safari still surprises me
html-in-canvas is so promising. Can't wait when in 15 years Safari will support it!
In Polotno Editor we current have two modes:
1. Plain text mode (default)
2. Rich text mode
In plain mode, a text block can't have mixed styles. While it is limited, it is very fast.
Rich mode is using svg/foreignObject approach with HTML inject to render on the canvas. Slow...
Added an accurancy benchmark with HUGE amount of test cases comparing canvas output vs svg+foreighObject render.
polotno.com/render-tag/b...
🚀 I built render-tag: the fastest way to draw HTML rich text on canvas. Pure 2D API, no SVG/foreignObject workarounds. 5x faster than the SVG approach, even more with large fonts.
Built this to solve my biggest pain point working on a web design editor. Building a canvas app? Take a look!
The release is here with the latest version 10.0.0.
(5) And as usual, fixing some edge cases, bugs, and general maintenance.
4) Added ability to hook into character render for text animations.
Another large update is the new Node.js render backend via skia-canvas.
From my tests, the rendering is closer to Chrome, especially in text. It's very useful to have as consistent results as possible on both client and server side renders.
Native filters work a lot faster.
Here I am applying a blur filter on a 5000x5000 px image.
2. New: Native CSS-style filters
Native filters work much faster if supported (I hate you, Safari).
1. Konva is fully migrated into ESM modules. Previously I had tons of issues with delivering both CommonJS and ES, so at some point I switched to CommonJS only.
But now there is much better support for ES modules in the JS ecosystem. So I think it is time to go the modern road.
🚀 I published Konva v10 pre-release: 10.0.0-0
ESM-only, opt-in Node backends (canvas/skia), native CSS-style filters, improved text positioning, plus fixes & perf.
Install: npm i konva@next
Details + demos in the thread 👇
~70% of Konva.js downloads are paired with react-konva.
Looks like native React integration plays a big role in its popularity.
According to npm, Konva.js is downloaded half a million times every week now. That is the top, comparing to alternatives.
Are there ways to estimate CDN usage?
Konva.js has way fewer open issues on GitHub than most similar libraries. I take pride in that.
TIL
You can load PDF as a regular image in safari.
Like really just <img src="file.pdf" />
It feels so good to add a good index into DB for better performance.
Half of the day I am fighting with text rendering issue in puppeteer (headless chrome).
Then I found the solution...
It was changing userAgent of created instances...
I love software...
Who us using konva js?
I am close to releasing a new documentation website: new.konvajs.org
Please stress test it. I need some aggressive feedback with suggestion for improvements.
Now I understand why we need a quantum computing chips.
To play DOM inside typescript type system at 30 FPS.
Seeing lots of visitors on my Polotno SDK site who really just want the free editor (I call it Polotno Studio).
I want to stay focused on B2B and avoid getting distracted by unrelated traffic. How do I filter or redirect those users, so I don't lost focus and conversions?
Do you save them somehow and organize? Like tons of bookmarks? A collection in codesandbox?
Debugging adventures with @sentry.io
Frontend: Wrestling browser quirks, rogue extensions, and device chaos.
Node.js backend: When in doubt, slap “retry” on it.
Some DNS things get down on digitalocean, so spaces are down.
My Cloud Render API gets down as well.
I decided to temporary switch to @supabase.com storage. But looks like its DNS for storage is down too!
What a wonderful day...
Currently, it is not very fancy under-the-hood yet. Just a simple chatGPT with a little prompt. But I have plans to attach full konva docs into it, so it gives the best practices with the last versions.
While rebuilding new docs and writing more demos for vue.js framework, I got several use cases to improve it.
Just made a new useImage hook for it.
github.com/konvajs/vue-...
Drop me your feedback if you use vue-konva.
Konva docs already have tons of demos for vanilla js.
Updating these docs for react and vue versions is very time-consuming. And here I got a good use of AI and Cursor editor. So I can boostrap demos with AI and then manually review them to make sure they are good.
