Fabricat NPM | npm.io

fabricat

Canvas-based version of the Scratch 3.0 renderer

Setup

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Fabricat canvas rendering demo</title>
    </head>

    <body>
        <canvas id="myStage"></canvas>
        <canvas id="myDebug"></canvas>
    </body>
</html>

var canvas = document.getElementById('myStage');
var debug = document.getElementById('myDebug');

// Instantiate the renderer
var renderer = new require('fabricat')(canvas);

// Connect to debug canvas
renderer.setDebugCanvas(debug);

// Start drawing
function drawStep() {
    renderer.draw();
    requestAnimationFrame(drawStep);
}
drawStep();

// Connect to worker (see "playground" example)
var worker = new Worker('worker.js');
renderer.connectWorker(worker);

Standalone Build

npm run build

<script src="/path/to/render.js"></script>
<script>
    var renderer = new window.RenderCanvasLocal();
    // do things
</script>

Testing

npm test

Credit

Most of this codebase was written by the Scratch Team for scratch-render, the official WebGL-based renderer for Scratch. I simply modified it to work via the 2D canvas drawing API.

gl-matrix grapheme-breaker ify-loader linebreak minilog raw-loader scratch-storage scratch-svg-renderer

@infinitebrahmanuniverse/nolb-fab @everything-registry/sub-chunk-1643 @zalastax/nolb-fab

0.1.0-prerelease.20210305141817

3 years ago

0.1.0-prerelease.2019-11-11T10-51Z

4 years ago

0.1.0-prerelease.2019-09-19T12-01Z

5 years ago

0.1.0-prerelease.2019-07-09T02-28Z

5 years ago

0.1.0-prerelease.2019-05-26T06-54Z

5 years ago

0.1.0-prerelease.2019-05-26T04-42Z

5 years ago

0.1.0-prerelease.2019-05-26T04-34Z

5 years ago