spryte | debuff

NewHow we made a 2D renderer 2-4x faster than the most popular one

Blazing fast 2D rendering for the web.

2-4x faster than the most popular 2D web renderer, at about a seventh of its size.

2,000 sprites– fps

Live: spryte drawing every sprite with one draw.sprites call per frame, on your device. Click it.

Bulk sprites

Pass a Float32Array of positions and spryte uploads it as is: hundreds of thousands of sprites, no JavaScript per sprite.

Immediate mode

No display objects to create, pool or destroy. Draw what you want each frame, in order. Your game state is the only source of truth.

Render targets and shaders

Draw into offscreen targets, then through your own fragment shaders: glow, CRT, dissolves, palette swaps.

Tiny

About 13 kB of JavaScript, no dependencies. The Canvas 2D fallback loads only on browsers without WebGL2.

Verified pixels

Every fast path is checked pixel for pixel against the simple path on a real GPU, including GPU context loss and restore.

With debuff, or alone

spryte is the renderer inside every debuff game, and a standalone MIT package for any canvas.

Draw, don't manage

One renderer, one frame loop. Sprites, particles, shapes and text, batched onto WebGL2 with an automatic Canvas 2D fallback.

Read the guideComing from PixiJS?

ts

import { createRenderer } from "spryte";

const draw = createRenderer(canvas);

function frame() {
  draw.begin("#111", 320, 180, 2);
  draw.sprite(hero, x, y, { rotation });
  draw.sprites(spark, sparks, live); // thousands, one call
  draw.text("score 42", 8, 8);
  draw.end();
  requestAnimationFrame(frame);
}