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

51–60 of 76 posts

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

#51

Post by lukan »

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

"pixi webgl has a limit on the number of canvases on the screen at the same time"

But that limit is very high. What were you doing?

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

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

#52

Post by leptons »

gedy wrote: post #42
solardev wrote: post #37

Earlier quoted context omitted.

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.

If you have a few interactive elements, maybe even a few hundred or so, then SVG can work just fine. I had thousands of interactive elements, and using DOM elements (including SVG) caused massive slowness and memory issues. Konva.js solved all of that for me, it's extremely performant even with thousands of interactive elements.

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

#53

Post by diath »

lukan wrote: post #51
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

"pixi webgl has a limit on the number of canvases on the screen at the same time" But that limit is very high. What were you doing? https://www.goodboydigital.com/pixijs/bunnymark/

Those are just sprites rendered onto the same canvas, not multiple canvases.

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

#54

Post by vekker »

lavrton wrote: post #15
rapnie wrote: post #10

Is this a community-driven project, or is there a company behind the project?

It is mostly community-driven. Recently, I started to use a bit of my company resources to improve the konva project. Currently, I am playing with AI tools for docs, so I have to pay for API usage.

I'd highly recommend to add an "LLM Cheatsheet" page to your docs. Example: https://goatdb.dev/llm-cheatsheet/

No doubt this would help increase adoption these days, and make implementation a lot easier.

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

#55

Post by recroad »

probabletrain wrote: post #21

I've used PixiJS and react-pixi-fiber to write a declarative 2D WebGL renderer in React with excellent results. PixiJS also has a Canvas2D fallback when WebGL isn't available. I wonder how this compares.

PixiJS is too low level for anyone who wants to get something up quickly. For example, you have to implement your own dragging code (ew).

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

#57

Post by gedy »

leptons wrote: post #52
gedy wrote: post #42

Earlier quoted context omitted.

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.

If you have a few interactive elements, maybe even a few hundred or so, then SVG can work just fine. I had thousands of interactive elements, and using DOM elements (including SVG) caused massive slowness and memory issues. Konva.js solved all of that for me, it's extremely performant even with thousands of interactive elements.

That's helpful to hear, thanks

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

#58

Post by lukan »

diath wrote: post #53
lukan wrote: post #51

Earlier quoted context omitted.

"pixi webgl has a limit on the number of canvases on the screen at the same time" But that limit is very high. What were you doing? https://www.goodboydigital.com/pixijs/bunnymark/

Those are just sprites rendered onto the same canvas, not multiple canvases.

The idea with pixi is, that you have one HTML canvas. But every sprite can also be a graphics object/canvas.

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

#59

Post by phil-martin »

lukan wrote: post #58
diath wrote: post #53

Earlier quoted context omitted.

Those are just sprites rendered onto the same canvas, not multiple canvases.

The idea with pixi is, that you have one HTML canvas. But every sprite can also be a graphics object/canvas.

Which makes it ill-suited when you need multiple canvases. Pixijs is amazing, and I mix Pixi, Fabric and regular canvases in my application.

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

#60

Post by salojoo »

lukan wrote: post #51
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

"pixi webgl has a limit on the number of canvases on the screen at the same time" But that limit is very high. What were you doing? https://www.goodboydigital.com/pixijs/bunnymark/

The amount of concurrent webgl canvases on a page is limited by browsers. I believe it's somewhere between 8-20 depending on the browser.

Hopefully webgpu would lift that limit?

Post reply on HN