Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

konvajs.org

Post reply on HN
Print view View original

41–50 of 76 posts

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#41

Post by gedy »

spankalee wrote: post #31
gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

That's my question, because SVG is declarative vector graphics. It has a ton of features, can be SSR'ed, written and used in various apps... I wish the performance issue were either fixed or dispelled. I think I recall some SVG performance work being done couple of years back.

Yes I'm sure canvas is still quick, but I've run into teams doing really elaborate things in canvas, d3, etc for what amount to really simple graphs where they'd have been much better off with normal DOM elements and events in SVG.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#42

Post by gedy »

solardev wrote: post #37
gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

It is much much MUCH faster. SVGs really slow down on some browsers (especially Firefox) after a certain level of complexity and interactivity.

Canvas can be quick yes, but I was surprised recently when I tried converting an animated image overlay thing I had written in SVG to canvas. I was expecting huge speedups, but it was no faster or smoother with the same data model. I needed mouse interactions as well and was nice to have normal events for these.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#45

Post by tetris11 »

solardev wrote: post #34
afavour wrote: post #19

Earlier quoted context omitted.

SVG export feels like it would be borderline impossible. Raster graphics to vector?

The underlying shapes are defined by geometries (so vectors) and then rasterized to canvas. So the SVG export could happen before the rasterization. There are other libs that are native SVG though, so why even use Konva? The benefit of Canvas is that it can be a lot, LOT faster than having multiple complex SVGs. SVG is especially slow on Firefox IIRC.

SVG purely for image export, I'm not talking about animation features.

Konva to set the scene, SVG for final touches before you publish the image somewhere

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#46

Post by polskibus »

h1fra wrote: post #7

Don't know about the library but the spreadsheet project built on top is impressive https://www.rowsncolumns.app/

That component is not built on Konva though. Canvas has long been known to be the perf endgame for web, see google sheets etc .

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#47

Post by salojoo »

solardev wrote: post #29
salojoo wrote: post #24

I evaluated this vs pixi and native canvas API. In the end I decided to use native API. Konva didn't have enough performance for my use case and pixi webgl has a limit on the number of canvases on the screen at the same time The native API is easy to use and well documented. It also performs well enough to animate charts at 60fps on modern hw for my use case. I also like that there are no libraries to update

What was your use case? Konva is a pretty high level abstraction, more like a lightweight interactive geometry & paint engine than a graphics API. It must've taken quite a bit of work to recreate similar functionality using native APIs?

I'm rendering charts. The native API conveniently provides the fundamentals with lines and rectangles. In addition masking and text have been very useful.

Interaction is also supported by the API with hit regions, though I've opted to do my calculations. But I agree that interaction is where Konva would probably have shined.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#48

Post by lavrton »

polskibus wrote: post #46
h1fra wrote: post #7

Don't know about the library but the spreadsheet project built on top is impressive https://www.rowsncolumns.app/

That component is not built on Konva though. Canvas has long been known to be the perf endgame for web, see google sheets etc .

It is Konva. You can inspect it in Dev Tools.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#49

Post by leptons »

gedy wrote: post #6

For folks who have used this, why would you choose this instead of SVG inside React, Svelte, etc?

I built a web app (started about 7 years ago) that had used hundreds up to about 2000 DOM elements that are all draggable with lots of interactivity. The app slowed to a crawl. I used DOM elements at the time knowing it was going to be difficult to scale up to thousands of items. Using React-dnd to make the elements draggable may have been the wrong way, but it was fine for proof-of-concept. But eventually it became a gigantic memory hog and would crash the browser after a while.

Konva.js solved the issue for me. It was very easy for me to convert this entire interactive piece into Konva.js, and performance is amazing. No memory issues now at all, and I can throw thousands more interactive items than I could before. It was very easy to reuse the interactivity code with Konva, and now my web application has great performance again.

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#50

Post by lukan »

sebdufbeau wrote: post #3

I joined a project last year which uses Konva inside an Angular application. It was my first time doing any kind of canvas programming, but the ergonomics of konva can be picked up quite rapidly and I've been enjoying quite a lot. We're working on performance-sensitive project, so one lesson we learned is that all shapes listen to all mouse events by default. We didn't even have lots of shapes, but this was enough to…

"We're working on performance-sensitive project"

Konva looks awesome, but canvas based. For more performance I switched from canvas to pixi, which is webgl/webgpu based.

Drawing can be also expensive there(in some cases even more so), but if you can manage to put it in a texture in time, you can have looooots of moving animated shapes even on mediocre mobile phones.

https://www.goodboydigital.com/pixijs/bunnymark/

Post reply on HN