📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Jan 20, 2021
2 stars
Kaboom and TagsRPG Tiles 🐉Playing with yieldMy FooterHow to: get around flat array issue in Observable TablesHello, Slide-ElementHello, tsParticlesKaboom - dynamic valuesHello Lit.devP5 js Sketch learningsRun Some Code on Button ClickMy RPG Persona3D Pixel Art with three-elementsRandom SquaresHello, Sticky HeadersWalking Dragon SVGHello, Haunted!Scrubber TestHello, Mithril JSHello, BraceryExecutable JS FileAttachment TestTiny Tools viewerHello, HandelData from Google Spreadsheets test 001Testing fetch with runkitHello TheCatAPIHello Chuck Norris Jokes APIHello Count APIHello Agify.ioHello KontraHello, maze generatorTesting ecsyjsMonster Icon Mix UpTesting Require and Import with GitHub JSSkypack PixijsTesting Toggle SwitchStorytelling test 001Testing button clickTesting a local imageTesting ImportsTesting imports
Hello, Fabric js
Also listed in…
API
{
let c = html`<canvas id="c"></canvas>`;
yield c; // this is the magic word. This pushes the canvas out before the code below needs it.
// I learned this magic from https://observablehq.com/@tmcw/p5
let ctx = c.getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas("c");
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
canvas.add(rect);
return c
}
{
let cc = html`<canvas id="cc"></canvas>`;
yield cc; // this is the magic word. This pushes the canvas out before the code below needs it.
let ctx = cc.getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas("cc");
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45 // only change
});
// "add" rectangle onto canvas
canvas.add(rect);
//change it a bit
rect.set('fill', 'green');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);
return cc
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
