spritejs.org

Spritejs is a cross platform high-performance graphics system, which can rendering graphics on web, node, desktop applications and mini-programs.

Spritejs^Next is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.

Manipulate the sprites in canvas as you do with the DOM elements.

Features

Manipulate the sprites element as you do with the DOM elements.
Rendering by WebGL2 context.
Multiple layers.
DOM Events.
Object Oriented Programmed Development with ES6+.
OffscreenCanvas and Web Worker.
Work with d3.
Server-side rendering.
Vue.

Quick Start

SpriteJS - spritejs.org

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<div id="container"></div>
<script>
    const imgUrl = 'https://s5.ssl.qhres.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const container = document.getElementById('container');
    const paper = new Scene({
      container,
      width: 400,
      height: 400,
    })

    const sprite = new Sprite(imgUrl)
    sprite.attr({
      bgcolor: '#fff',
      pos: [0, 0],
      size: [400, 400],
      borderRadius: '200'
    })

    paper.layer().appendChild(sprite)
</script>

Learn more at spritejs.org

Usage

In browser:

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>

With Node.js:

npm install spritejs --save

import * as spritejs from 'spritejs';

Examples

Basic

With D3

Compatible with d3.js.

Q-Charts

A visulization library based on spritejs.

Ecosystem & Extensions

Project	Description
sprite-vue	SpriteJS for Vue.js.
sprite-react	Rendering spritejs elements with React.
q-charts	A visulization library based on spritejs
cat-charts-vue	A visulization library based on spritejs , qcharts and Vue.