Public
Edited
Nov 4, 2023
1 fork
23 stars
canvas = {
const ctx = DOM.context2d(width, width / 2);
ctx.lineCap = "round";
ctx.canvas.style.touchAction = "none"; // ignore native panning and zooming
ctx.canvas.style.border = "dotted 1px gray";
const curve = d3.line().curve(d3.curveCatmullRom).context(ctx);
let offset;
const lastEvent = {};
ctx.canvas.addEventListener(
"pointerdown",
({ pointerId, clientX, clientY, pressure }) => {
offset = ctx.canvas.getBoundingClientRect();
lastEvent[pointerId] = [[clientX - offset.x, clientY - offset.y]];
ctx.canvas.setPointerCapture(pointerId);
}
);
ctx.canvas.addEventListener(
"pointermove",
({ pointerId, clientX, clientY, pressure, width }) => {
if (!lastEvent[pointerId]) return;
lastEvent[pointerId].push([clientX - offset.x, clientY - offset.y]);
ctx.beginPath();
curve(lastEvent[pointerId]);
ctx.stroke();
}
);
ctx.canvas.addEventListener(
"pointerup",
({ pointerId }) => {
lastEvent[pointerId] = null;
}
);
clear;
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.
