README-canvasmodel.md

Canvas renderer documentation

• Canvas renderer documentation
  • Layer processing and composition
  • CanvasModel
  • Animations
    • Animating layer properties
  • SugarCube widgets
    • Model API
      • <<selectmodel NAME [INSTANCE]>>
      • <<showlayer LAYERNAME [...FILTERS]>>
      • <<hidelayer LAYERNAME>>
      • <<modelfilter FILTERNAME FILTER>>
      • <<modelfilterset FILTERNAME OPTIONNAME OPTIONVALUE>>
      • <<animatemodel [CSSCLASS]>>
      • <<rendermodel [CSSCLASS] [CSSANIM]>>
    • Low-level API
      • <<canvasstart WIDTH HEIGHT FRAMES>>
      • <<canvaslayer Z SRC [OPTIONS...]*>>
      • <<canvasanimate [CSS_CLASSES]>>
      • <<canvasdraw [FRAMECOUNT] [CSS_CLASSES]>>
  • Gradients & Patterns
    • Gradients
    • Patterns

Layer processing and composition

Example code that displays a single layer.

JavaScript:

var canvas = Renderer.createCanvas(256, 256);
Renderer.composeLayers(canvas, [{
    src: "img/hair/sides/default/chest.png",
    desaturate: true,
    brightness: -0.3,
    blendMode: 'hard-light',
    blend: '#e49b67'
}]);

SugarCube:

<<canvasstart 256 256 1>>
<<canvaslayer 1 "img/hair/sides/default/chest.png" `{ desaturate: true, brightness: -0.3, blendMode: 'hard-light', blend: '#e49b67' }`>>
<<canvasdraw>>

The image will be processed in the following way:

Explanation of layer processing options: