fabricat
v0.1.0-prerelease.20210305141817
Published
Unofficial Canvas Renderer for Scratch 3.0
Downloads
4
Readme
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 testCredit
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.