simple layered canvas generation for js

with fast, easy, powerful randomization

webgl / html5 canvas | built on top of pixi.js

layers of layers of images

at it's most basic, anvs loads and stacks images on top of each other

*relatively* more complex example

anvs layers can be positioned and sized relative to their parent


static canvases are fun, but randomizing is more fun


anvs layers can be recursive, here's a fibonacci sequence


layers can be updated through an optional update function

here's the same fibonacci sequence but with each layer being rotated in it's update

draw on many canvases


(coming soon ... maybe)

basic usage

import * as Anvs from 'anvs';


const anvs = new Anvs.GL({
    size: {x: 100, y: 100}

// A layer that's just a string is an image 
// without any options!
const anvsLayer: AnvsLayer = { ... /* to draw */ }



// use the rendered canvas


built in react component, with a lazy alternative to make ssr happy (for most use cases)

import { AnvsReact } from 'anvs';


// You can also use a lazy version (React.Suspense)
// <AnvsReact.LazyGL
    // The size that's rendered to the canvas
    size={{x: 100, y: 100}} 

    // Optional, will draw immediately.
    //   - If you want access to the anvs renderer, then  
    //     use a react ref
    layer={ ... }


copyright 2022 hmwrk, inc.