fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

•    Javascript

---

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

canvas graphic graphics svg node-canvas parser html5 object-model visualization data-visualization charts charting-library

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.

html5 html5-game-development game game-2d rendering engine 2d canvas mobile

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.

draw canvas graphics svg html5-canvas svg-path sketchy hand-drawn

cax - HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎

•    Javascript

---

HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎

canvas svg render web weapp wegame miniprogram minigame 2d

konva - Konva

•    Javascript

---

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.

konva shape node-canvas canvas animation drag-and-drop graphics animations graphic html5

pixi

•    Javascript

---

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.

canvas2d pixijs webgl glsl canvas rendering pixi game renderer rendering-engine rendering-2d-graphics

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.

canvas webgl graphics animation html5

macSVG - macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ---

•    Objective-C

---

May 8, 2018 – macSVG v1.1.4 is released, with minor user interface improvements, and various bug fixes. See the Release Notes for details. macSVG is a MIT-licensed open-source macOS app for designing HTML5 SVG 1.1 (Scalable Vector Graphics) art and animation.

svg animation scalable-vector-graphics graphics html5 macos-webkit-framework webkit xml smil ios morphing bezier editor path mac vector-graphics web-developer

GreenSock-JS - GreenSock's GSAP JavaScript animation library (including Draggable).

•    Javascript

---

GSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See the "Why GSAP?" article for what makes GSAP so special. Unlike monolithic frameworks that dictate how you structure your apps, GSAP is completely flexible; sprinkle it wherever you want. React, Vue, Angular or vanilla JS - doesn't matter. Simply put, GSAP is the most robust high-performance animation library on the planet, which is probably why every major ad network excludes it from file size calculations.

animation tweenlite tweenmax timelinelite timelinemax gsap greensock easing easepack pixiplugin customease jquery.gsap.js bezier svg 3d 2d transform morph morphing tweening

phaser - Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering

•    Javascript

---

Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development. Phaser is available in two versions: Phaser 3 and Phaser CE - The Community Edition. Phaser CE is a community-lead continuation of the Phaser 2 codebase and is hosted on a separate repo. Phaser 3 is the next generation of Phaser.

phaser phaserjs html5-game-development webgl game-frameworks game-development 2d html5 canvas game physics tweens typescript web-audio

phaser-ce - Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering

•    Javascript

---

Phaser is a fast, free, and fun open source HTML5 game framework. It uses a custom build of Pixi.js for WebGL and Canvas rendering, and supports desktop and mobile web browsers. Games can be compiled to iOS, Android and native desktop apps via 3rd party tools. You can use JavaScript or TypeScript for development. Years after release, Phaser is still one of the most starred game frameworks on GitHub. Thousands of developers worldwide use Phaser. From indies and multi-national digital agencies, to schools and Universities. Each creating their own incredible games.

phaser canvas webgl html5-game-development 2d html5 game physics tweens typescript web-audio

paper

•    Javascript

---

The Swiss Army Knife of Vector Graphics Scripting

vector graphic graphics 2d geometry bezier curve curves path paths canvas svg paper paper.js paperjs visualization data-visualization charts charting-library

Dynamic_effect - 平时练习的一些前端动效，基于HTML5，CSS3，Canvas，Svg

•    Javascript

---

平时练习的一些前端动效，基于HTML5，CSS3，Canvas，Svg

canvas css3 html5 3d 3d-banner animation

lyon - 2D graphics rendering experiments in rust.

•    Rust

---

A path tessellation library written in rust for GPU-based 2D graphics rendering. For now the goal is to provide efficient SVG-compliant path tessellation tools to help with rendering vector graphics on the GPU. For now think of this library as a way to turn complex paths into triangles for use in your own rendering engine.

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.

fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

•    Javascript

---

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

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.

mobile charts visualization grammar antv f2 html5-canvas data-visualization data-visualisation canvas 2d-draw mobile-visualization interactive

react-art - React Bridge to the ART Drawing Library

•    Javascript

---

React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).

react art svg vml canvas jsx

react-ape - 🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

•    Javascript

---

React Renderer to build UI interfaces using canvas/WebGL. React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainly a renderer focused on creating things for TV, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices. If you're curious about the name: It's a "joke" with Netflix's React Gibbon renderer. I choose to use Ape then.

react react-renderer renderer render gl webgl webgl2 canvas canvas-html5

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.

canary canvas html5-canvas origami canvas-game css animation animation-engine