10 ms·
Konva – HTML5 2d canvas library for desktop and mobile applications
- stevejohnson 9y agoCool! 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
- Niksko 9y agoReally 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 ️
- antoineMoPa 9y agoI like the fact that there are plenty of demos!
- jpwagner 9y agoBeen 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 9y agoThank you!
- pvg 9y agoYou can probably have this changed to a Show HN: since you seem to be the author and are around to comment on it.
- hakcermani 9y agoWas going to say the same but got beat. Love the ease of use in React. Thank you!
- RobertRoberts 9y agoThis 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 9y agoTry http://fabricjs.com/ http://fabricjs.com/
- deleted 9y ago[deleted]
- gigatexal 9y agoCan this be packaged as a single exe and can you make calls outside to like the file system or network?
- icebraining 9y agoThis 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.
- scraft 9y agoI 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.
- pmx 9y agoI was actually enjoying that game until the radiator turned up! haha
- chatmasta 9y agoMan, 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.
- hugozap 9y agoVery cool
- rypskar 9y agoWe 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 9y agoDo you also target mobile browsers by any chance and, if so, is the lib fast enough?
- rypskar 9y agoYes, 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 9y agoThanks, that's very good to know.
- finchisko 9y agoWondering if Konva could be used for UI rendering (imagine flutter/Skia for web). And if it could be faster then DOM.
- alex7o 9y agoSkin is already the canvas backend for all the popular browsers, so no need to use anything.
- fenwick67 9y agoWebGL would be faster than Canvas.
- chrisdun 9y agoFlipboard 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
- nuclearcookie 9y agoCan anybody explain this: "High performance event detection via color map hashing"? Any resources that explain this concept?
- talldan 9y agoI'm not completely sure it's the same thing, but I remember a technique for picking using colour maps. It's described in this tutorial: http://www.opengl-tutorial.org/miscellaneous/clicking-on-objects/picking-with-an-opengl-hack/ http://www.opengl-tutorial.org/miscellaneous/clicking-on-obj...
- lavrton 9y agohttps://blog.lavrton.com/hit-region-detection-for-html5-canvas-and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8 https://blog.lavrton.com/hit-region-detection-for-html5-canv...
- nuclearcookie 9y agoOk thank you!
- JCSato 9y agoI'm curious: How does this compare to something like Pixi?
- Raed667 9y agoI have used Konva to make a 2D map engine in my last job. It was a good dev experience.
- lewispollard 9y agoThe demo on the front page says "Try to drag a star", but when I do, nothing happens.
- mcintyre1994 9y agoThat's odd - works well for me on my laptop both click+drag and from the touch screen.
- rhapsodic 9y agoIt'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
- ross_squires 9y agoThis 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-konva-js-for-many-images/42787941#42787941 https://stackoverflow.com/questions/42729872/optimizing-konv...
- jiojfekjl 9y agoNitpicking: 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.
- wes-k 9y agoAnyone 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.