Legra (Lego brick Graphics) is a small (3.36KB gzipped) JavaScript library that lets you draw using LEGO® like brick shapes on an HTML <canvas> element. This library defines basic graphics primitives like lines, rectangles, polygons, ellipses, bézier curves, etc. All shapes are drawn either outlined or filled in.
Best jQuery HTML5 canvas Plugins & Tutorials with Demo
LegraJS : Javascript Lego brick Graphics Library
Zdog : A Pseudo-3D Engine for Canvas and SVG
Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes.
Zdog uses the same principle. It renders all shapes using the 2D drawing APIs in either <canvas> or <svg>. Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from Rotating 3D Shapes by Peter Collingridge.
Ambient Canvas Backgrounds with HTML5 Canvas API
Today we’ll be exploring some ambient webpage background animations. The idea here was to create a collection of animations that are interesting to look at without being (too) distractive, and could be easily applied to the background of a webpage. Each animation is created using vanilla (es6+) JavaScript with the Canvas API.
SpriteJS : A lightweight 2D Render Object Model
SpriteJS is a lightweight 2D canvas rendering engine for modern browsers. Manipulate the sprites in canvas as you do with the DOM elements.
SpriteJS can be used with D3.js, Proton and Matter-js.
Features:
- Manipulate the sprites element as you do with the DOM elements.
- Perform fast drawing with smart cache.
- Multiple layers.
- Web Animations Api
- Controllable event dispatching.
- Object Oriented Programmed Development with ES6+
- Server-side render. Work with node-canvas.
- Weixin Apps
Integrated-2D : Javascript 2D rendering framework for SVG & Canvas
Integrated-2D – is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas and WebGL contexts. I2D’s simple syntax and semantics lets you combine the power of Vector graphics and Bitmap to achieve complex visualisations easily.
I2Djs provides single Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D’s multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualisation under a single roof.
I2D also provides a unique data-driven approach with join-actions for DOM manipulation based on data binding.
Hilo : HTML5 Game Framework
Hilo is a Cross-end HTML5 Game development solution developed by Alibaba Group. It could help developers build HTML5 games conveniently in minutes.
Features:
- independency modules design, support multiple module styles;
- Object Oriented Programmed Development;
- Simple and efficient Visual Object Architecture;
- Multiple render model supported, including
CanvasRenderer,DOMRendererandWebGLRenderer; - Compatible for multiple desktop and mobile browsers. Using
Flash Shimto support IE (yes as you can see, it support IE); - Physics extensions supported:
Chipmunk - Skeleton animation extensions supported:
DragonBones
BLOB – Interactive Animated 3D Background
BLOB is animated, interactive and highly customizable 3D background. Visual editor included. Supports morphing and other shape transitions. Created as Javascript plugin based on HTML5 Canvas.
Features:
- Interactive 3D background
- HTML5 Canvas technology
- Does not require WebGL support
- All browsers and platforms
- Works both online and offline
- Multiple instance support
- Three animation concepts that can be combined
- Responds to mouse movements
- Easy to use
- Highly customizable
- Rich API
- Visual editor
