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

61–70 of 76 posts

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

#61

Post by zdragnar »

gedy wrote: post #40
zdragnar wrote: post #17

Earlier quoted context omitted.

Take react / svelte/ etc out of the equation. The important question is why would you use canvas vs svg? As a sibling comment noted, number of elements can be a big performance drag, since they all add weight in the DOM. Other considerations are animations- it's been a few years, but I recall a number of animations in SVG that would utterly destroy browser performance (I think it was animating a stroke with CSS but I…

I understand that, though this is not direct canvas access and manages a number of components to handle each shape. I'd assume this introduces some overhead too.

Certainly, but if you aren't willing to accept overhead, none of these frameworks are all that great.

That said, unless you absolutely can't handle the overhead, it's usually worth the penalty. The canvas API is fully imperative, which really conflicts with the style of a component based architecture.

Finally, while it is possible to hand-roll something faster, it's also possible to make mistakes and undermine the performance of the rendering pipeline on your own. If you have something complex enough to warrant this library, you're likely to end up rolling your own abstractions for things anyway.

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

#62

Post by graftak »

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

Impressive, it took me 113K bunnies for a single frame drop on an iPhone 14pro

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

#63

Post by lukan »

salojoo wrote: post #60
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/

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?

I guess, the trick is to keep everything inside on stage. But why would I need more than 8 stages?

I have allmost unlimited pixi containers.

(And HTML and sometimes a ordinary canvas on top of my pixi canvas)

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

#64

Post by solardev »

tetris11 wrote: post #45
solardev wrote: post #34

Earlier quoted context omitted.

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

Seems like you could just use Figma if you want to build a static SVG for export. Konva is more for building interactive apps.

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

#65

Post by steve_adams_86 »

grav wrote: post #30
jonplackett wrote: post #27

Pricing is unbelievable

I give up, why?

Never give up! https://www.youtube.com/watch?v=KxGRhd_iWuE

I can't tell if your "give up" is a reference to the "never gonna give you up" line from the rick roll video. The internet is a web of labyrinthine references, and I don't know what means what, if anything anymore.

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

#66

Post by culi »

lavrton wrote: post #48
polskibus wrote: post #46

Earlier quoted context omitted.

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.

If GP is like me they were probably thrown off by the fact that the formatting menu is just HTML and only the cells themselves are in a element

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

#68

Post by simonsarris »

afavour wrote: post #19
tetris11 wrote: post #14

Is this the successor library for KineticJS and ConcreteJS? Kinetic was amazing back in it's day, but lacked SVG export. I wonder if that's built-in now

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

I make a canvas-based diagramming library (GoJS) and implemented SVG export, and then a whole SVG renderer if you want the same scene in real-time. Generally if you're using HTML Canvas commands, you can engineer a perfect SVG equivalent. There are some really really really annoying edge cases with transforms, clipping, gradients, etc. But nothing is impossible :D

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

#70

Post by lukan »

phil-martin wrote: post #59
lukan wrote: post #58

Earlier quoted context omitted.

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.

I still would be interested in a use case for more stages. My stagecanvas is the background of the html document. And there I have many layers with different zoomlevels etc

Everything pixi goes there. And can appear exactly on the screen when and where I want. If I ever would have a use case of a second pixi layer above my html elements layer, I can do that. So I am really curious, what else one could need?

Post reply on HN