
Konva – HTML5 2d canvas library for desktop and mobile applications - lavrton
https://konvajs.github.io/
======
rypskar
We are using Konva for simple education games and the game editor at
[https://learnplayground.com](https://learnplayground.com) and are mostly
happy with it. It is easy to work with, the documentation is good, and so far
supports all our use cases. The only drawback is some performance issues with
animations on some browsers which we are not sure if we can fix by optimizing
our code.

We have been using Konva for 2 years and would probably have chosen it again
if we where going to start developing today

~~~
laurent123456
Do you also target mobile browsers by any chance and, if so, is the lib fast
enough?

~~~
rypskar
Yes, we target mobile browser and it works good in most. We did get a report
that it is slow on Samsung browser for one user, but haven't looked more into
it yet. It is also very slow on Firefox on Android, but according to some bug
reports we found on Firefox it is because they have problems with performance
on Android when using several layers of canvas. So as long as you don't care
to much about the 0.5% who use Firefox on Android or don't need to use layers
you should be good.

edit: you can go on
[https://learnplayground.com/games](https://learnplayground.com/games) and try
out free games if you want to test, but know that we are working on optimizing
the game engine to work better on mobile so performance and scaling is not as
good as it should be

~~~
laurent123456
Thanks, that's very good to know.

------
jpwagner
Been using this for a new project for a few months [0]. Cannot speak highly
enough about it - Thank you Anton [1]!

[0] specifically the react package [https://github.com/lavrton/react-
konva](https://github.com/lavrton/react-konva)

[1] [https://lavrton.com/](https://lavrton.com/)

~~~
lavrton
Thank you!

~~~
pvg
You can probably have this changed to a Show HN: since you seem to be the
author and are around to comment on it.

------
scraft
I have used Phaser to make games using HTML5 + TypeScript. It was my first
attempt of doing a browser game and I found it pretty decent to use.

[https://phaser.io](https://phaser.io)

I don't have the final build of the project I made with it publicly visible,
but an older build:

[https://total-tetris.herokuapp.com](https://total-tetris.herokuapp.com)

Supports mobile (touch controls) and desktop (keyboard controls). Final
version has Facebook leaderboards.

I had one or two issues with Phaser which I supplied fixes for which were
merged.

If I made a similar project, I would check out latest alternatives but
wouldn't hesitate to use Phaser again.

~~~
chatmasta
Man, very well done. That’s the best html game I’ve played on mobile. Super
addicting, and the radiators are an interesting twist! My strategy was to hold
them until I get a heated floor.

------
rhapsodic
It's worth mentioning that Konva began as a fork of KineticJS:

[https://github.com/ericdrowell/KineticJS/issues/1061](https://github.com/ericdrowell/KineticJS/issues/1061)

------
JCSato
I'm curious: How does this compare to something like Pixi?

------
stevejohnson
Cool! This is a superset of some things people misuse Literally Canvas[1] for.
I look forward to pointing people toward it when they ask about these kinds of
features.

[1][http://literallycanvas.com](http://literallycanvas.com)

------
antoineMoPa
I like the fact that there are plenty of demos!

------
ross_squires
This library is great, it's the basis of a mapping app (think D&D) some
friends and I kickstarted[0] a while back.

I also posted some optimizations techniques[1] for this library to Stack
Overflow.

[0]
[http://coneofnegativeenergy.com/hexkit/](http://coneofnegativeenergy.com/hexkit/)

[1] [https://stackoverflow.com/questions/42729872/optimizing-
konv...](https://stackoverflow.com/questions/42729872/optimizing-konva-js-for-
many-images/42787941#42787941)

------
Niksko
Really great, thanks for the resource!

I've had ideas in the past for websites or projects where I would have wanted
to use HTML5s canvas, but I haven't ever known where or how to get started.
The demo here seemed very straightforward and easy to understand.

EDIT: Upon further consideration, this will actually be perfect for an
upcoming project that I've been neglecting for a while due to not knowing how
to do the drawing aspect. And it works with React ️

------
wes-k
Anyone able to compare this with [http://paperjs.org/](http://paperjs.org/)?
In the past I've used Paper.js and have been very happy with it. It looks like
Konva has a very similar set of features.

------
Raed667
I have used Konva to make a 2D map engine in my last job. It was a good dev
experience.

------
RobertRoberts
This is pretty neat, does anyone have any other similar or equivalent
libraries to compare this against? It's always nice to see comparisons to
gauge the value of a feature or system structure. Thanks!

~~~
formatkaka
Try [http://fabricjs.com/](http://fabricjs.com/)

------
nuclearcookie
Can anybody explain this: "High performance event detection via color map
hashing"? Any resources that explain this concept?

~~~
lavrton
[https://blog.lavrton.com/hit-region-detection-for-
html5-canv...](https://blog.lavrton.com/hit-region-detection-for-html5-canvas-
and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8)

------
finchisko
Wondering if Konva could be used for UI rendering (imagine flutter/Skia for
web). And if it could be faster then DOM.

~~~
chrisdun
Flipboard did exactly this with react-canvas[0]. Runs nice enough even on
older devices (try this[1]), but it completely decimates accessibility. Looks
like there have been attempts with Konva too [2].

[0] [https://github.com/Flipboard/react-
canvas](https://github.com/Flipboard/react-canvas) [1]
[https://flipboard.com/@flipboard/flipboard-
picks-8a1uu7ngz](https://flipboard.com/@flipboard/flipboard-picks-8a1uu7ngz)
[2] [https://github.com/lavrton/react-konva](https://github.com/lavrton/react-
konva)

------
lewispollard
The demo on the front page says "Try to drag a star", but when I do, nothing
happens.

~~~
mcintyre1994
That's odd - works well for me on my laptop both click+drag and from the touch
screen.

------
jiojfekjl
Nitpicking: The stars don't do anything when I click them. Only when I start
to drag them do I get any kind of visual feedback that something happened
(they scale up)

Not sure if that's intentional. I'm on Firefox.

------
gigatexal
Can this be packaged as a single exe and can you make calls outside to like
the file system or network?

~~~
icebraining
This seems to be purely a visual library; I'm assuming it can be run on
Electron or similar platforms, which do allow you to access the file system
and network.

