konva - Konva

  •        267

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

http://konvajs.github.io/
https://github.com/konvajs/konva

Tags
Implementation
License
Platform

   




Related Projects

react-konva - React + Canvas = Love

  •    Javascript

React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework.

jcanvas - A jQuery plugin that makes the HTML5 canvas easy to work with.

  •    Javascript

jCanvas brings jQuery's powerful syntax and capability to the HTML5 canvas. Quickly create canvas-based apps that can utilize layers, animations, events, and much more. jCanvas works on all modern browsers and platforms, including iOS and Android.

KineticJS - KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications

  •    Javascript

##Mothballed I will no longer be maintaining this repo or the official KineticJS website because I have moved onto other ventures and projects. The latest version of KineticJS, 5.1.0, is very solid and can still be used in production applications. Please feel free to fork the repo if you'd like to make changes. Support of NodeJS is experimental.


progress-bar-animation - Making a Doughnut Progress Bar - research notes

  •    Javascript

Looking through the different CSS pie chart implementations I decided that CSS is not fitted for the job. All solutions were hacks that would be hard to control. I was also worried that it will be cumbersome to make it work on all the browsers that we support. Canvas, with almost universal support, seemed more appealing. However, canvas would require me to implement timing (e.g. easing functions) and scaling (to support higher dpis) myself. Besides, I though that it would not utilize GPU as well as CSS transitions/transforms. SVG seemed like the best of both worlds: it's universally supported, doesn't need any hacks to create a required shape, utilizes CSS transitions to create animations and fits all screen dpis out of the box. So, I dusted off my SVG knowledge and started coding. Happy with the result, I sprinkled it with some CSS magic and made a short video showing it in action.

node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS.

  •    C++

Alpha versions of 2.0 can be installed using npm install canvas@next.node-canvas is a Cairo backed Canvas implementation for NodeJS.

EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier

  •    Javascript

EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.

origami.js - Powerful and Lightweight Library to create using HTML5 Canvas

  •    Javascript

Initially, it's a tool for teaching geometry, web, and javascript in schools. Currently, it's a powerful library to create using HTML5 Canvas. Want to contribute? Follow these recommendations.

ccapture.js - A library to capture canvas-based animations at a fixed framerate

  •    Javascript

CCapture.js is a library to help capturing animations created with HTML5 canvas at a fixed framerate. An example is probably worth a lot of words: CCapture.js with Game of Life 3D.

stage.js - 2D HTML5 rendering engine for game development

  •    Javascript

Stage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source. Canvas is the graphic component of HTML5 game development, but it only has a drawing API and there is no data model like DOM to compose your application. You need to manually draw your application and manage rendering cycles to play it. Moreover, mouse events are only available at entire Canvas level and they also need to be processed manually.

awesome-canvas - A curated list of awesome HTML5 Canvas with examples, related articles and posts.

  •    

A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python. Please take a quick gander at the contribution guidelines first.

f2 - 📱📈An elegant, interactive and flexible charting library for mobile.

  •    Javascript

F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

isomer - Simple isometric graphics library for HTML5 canvas

  •    Javascript

An isometric graphics library for HTML5 canvas. View the official project page or try it out.

Fanvas - Fanvas,一键把swf转为html5 canvas动画。 Fanvas is a tool which can turn flash into canvas animation with just one key!

  •    ActionScript

Fanvas,一键把swf转为html5 canvas动画。 Fanvas is a tool which can turn flash into canvas animation with just one key!

Toast UI Image Editor - Full featured image editor using HTML5 Canvas

  •    Javascript

Toast UI Image Editor is a full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. It supports Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter, Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, GradientTransparency, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend and lot more.

wind-js - An demo animation of wind on a Canvas layer in the JSAPI

  •    Javascript

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from https://github.com/cambecc/earth and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto the canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity dictated by the interpolated surface.

rough - Create graphics with a hand-drawn, sketchy, appearance

  •    Javascript

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.

jsgif - Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS

  •    Javascript

Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS

nanovg - Antialiased 2D vector drawing library on top of OpenGL for UI and visualizations.

  •    C

NanoVG is small antialiased vector graphics rendering library for OpenGL. It has lean API modeled after HTML5 canvas API. It is aimed to be a practical and fun toolset for building scalable user interfaces and visualizations. The NanoVG API is modeled loosely on HTML5 canvas API. If you know canvas, you're up to speed with NanoVG in no time.