Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Apr 13, 2020
Download the shape of a countryInput: draw points on imageCanvas equality by valueInput: Draw an arrow on an imageCalibrate a Three.js camera using fSpyHello fSpyMain Colors from ImageColors palette from imageCan I Use Media Fragments?Hello Cloudinary UploadColor by numberPixel-art or Voronoi image tesselationHello pixelitInput: draw a box on imageExtended drawImageCSS object-fit formulasobject-fitEvery Other Pixel Is A LineFake video playerAsync image loading, and CORSPreload a list of imagesImage placeholderImage coverIdentify images with deterministic UUIDPerspective rectifier - examplePerspective rectifier
drawImage respects canvas transparency
Also listed in…
TIL
canvasA = {
const ctx = DOM.context2d(w, h);
ctx.strokeStyle = 'steelblue';
ctx.lineWidth = 8;
ctx.strokeRect(w / 4, h / 4, w / 2, h / 2);
return ctx.canvas;
}
canvasB = {
const ctx = DOM.context2d(w, h);
ctx.strokeStyle = 'red';
ctx.lineWidth = 8;
ctx.strokeRect(w / 8, h / 8, w / 4, (3 * h) / 4);
return ctx.canvas;
}
canvasC = {
const ctx = DOM.context2d(w, h);
// drawImage respects the transparency
ctx.drawImage(canvasA, 0, 0, w, h);
ctx.drawImage(canvasB, 0, 0, w, h);
return ctx.canvas;
}
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.
